Zum Inhalt springen
OneKitly
Registrieren · Anmelden

CSS-Verlauf-Generator

Erstelle einen linearen oder radialen CSS-Verlauf aus zwei Farben und einem Winkel, mit CSS- und Tailwind-Ausgabe.

Ähnliche Tools

Alle Tools: Farben & CSS →
Farbkontrast-PrüferWCAG-Kontrastverhältnis zwischen Text und Hintergrund, mit AA/AAA-Bestehen und Live-Vorschau.Farb-InvertiererInvertiere eine Farbe (255 − RGB) oder bilde die Komplementärfarbe, in HEX/RGB/HSL/CMYK mit Kontrast.Farbschema-GeneratorLeite komplementäre, analoge, triadische, tetradische, geteilte und monochrome Schemata aus einer Basisfarbe ab.CSS-KompressorMinifiziere CSS durch Entfernen von Kommentaren und Leerraum, um die Stylesheet-Größe zu senken.CSS-Flexbox-SpielplatzExperimentiere mit flex-direction, wrap, justify-content, align-items und gap — Live-Vorschau und kopierbarem CSS.CSS-Grid-GeneratorBau ein CSS-Grid-Layout visuell — Spalten, Zeilen, Abstände und Ausrichtung — mit Live-Vorschau und kopierbarem CSS.Bild-FarbwählerLade ein Bild, klick zum Abtasten eines Pixels und extrahiere eine dominante Palette — mit HEX und RGB je Farbfeld.Instagram-Schriften-GeneratorVerwandle deinen Text in Dutzende kopierfertige Unicode-Schriften für Instagram-Bio, Bildunterschriften und Kommentare.

Öffne CSS-Verlauf-Generator und du bekommst sofort eine Antwort — ohne Konto anzulegen. Sein Platz ist unter Farben & CSS; Farbkontrast-Prüfer und Farb-Invertierer beantworten die nächstliegenden Fragen.

So funktioniert's

  1. Öffne das Tool — ohne Anmeldung oder Installation.
  2. Gib deine Daten ein oder passe die verfügbaren Optionen an.
  3. Erhalte dein Ergebnis sofort und kopiere oder lade es herunter.

Häufige Fragen

Was ist CSS-Verlauf-Generator?

Erstelle einen linearen oder radialen CSS-Verlauf aus zwei Farben und einem Winkel, mit CSS- und Tailwind-Ausgabe.

Wann brauche ich das konkret?

Eine Farbe von einem Designtool in ein Stylesheet bringen, eine Palette um eine Markenfarbe bauen und prüfen, ob Text darauf lesbar bleibt.

Was ist der häufigste Fehler?

Kontrast nach Augenmaß beurteilen. Zwei auf hellem Monitor deutlich verschiedene Farben können das Barrierefreiheits-Verhältnis klar verfehlen — und genau dieses misst ein Audit.

Gibt es ein Werkzeug für den nächsten Schritt?

Farb-Invertierer ist das nächstliegende danach: Invertiere eine Farbe (255 − RGB) oder bilde die Komplementärfarbe, in HEX/RGB/HSL/CMYK mit Kontrast.

Was lohnt sich sonst noch daneben offen zu haben?

Farbschema-Generator und CSS-Kompressor — sie tauchen in derselben Aufgabe oft genug auf, um einen zweiten Tab zu verdienen.

Woher stammen die Daten?

Umrechnungen zwischen HEX, RGB und HSL sind exakt. Der Kontrast folgt der WCAG-2-Formel für relative Leuchtdichte; CMYK ist geräteabhängig — ein Bildschirmwert ist nur eine Näherung des Drucks.

Zum Weiterlesen

Alle Ratgeber →
ErklärungVerläufe, Banding und warum die Mitte matschig aussiehtIn sRGB zu interpolieren mittelt gammacodierte Zahlen: Die Mitte von Rot nach Grün ist #808000, obwohl die Halblicht-Antwort #bcbc00 lautet — 57,2 % zu wenig Licht. Banding ist ein eigenes Rechenproblem: 8 Bit ergeben 256 Stufen, und ein dunkler Verlauf hat womöglich nur 28. Hier sind beide, durchgerechnet.ErklärungFarbschemata sind Geometrie auf einem Kreis — und der Kreis stimmt nichtKomplementär, Triade, Analog und geteilt-komplementär sind bloß Drehungen: addiere 180°, 120°, 30° oder 150° zu einem Farbton. Die Arithmetik ist trivial. Das Problem ist, dass der HSL-Farbtonkreis nicht wahrnehmungsgleichmäßig ist — Gelb und Blau bei gleicher HSL-Helligkeit unterscheiden sich um den Faktor 12,85 in der Leuchtdichte — eine erzeugte Palette muss also anschließend auf Kontrast geprüft werden.ErklärungKontrastverhältnis: wie die WCAG es tatsächlich berechnetDas WCAG-Verhältnis lautet (L1 + 0,05) ÷ (L2 + 0,05), und L ist die relative Leuchtdichte, nicht die Helligkeit. Grün trägt 71,52 % davon und Blau 7,22 % — deshalb besteht reines Blau auf Weiß mit 8,59:1, während mittleres Grau mit 3,95:1 durchfällt. Hier ist die ganze Rechnung, von Anfang bis Ende durchgeführt.AnleitungHEX vs. RGB: Farben lesen und umrechnenHEX und RGB sind zwei Schreibweisen für dieselben Farben. Hier steht, wie du jede liest, umrechnest und Transparenz hinzufügst.RatgeberWas ein Minifier entfernen darf und was nichtMinifizierung muss die Bedeutung erhalten, und interessant ist der Leerraum, der Bedeutung trägt: der Nachfahrenkombinator, die Leerzeichen in calc(), der Abstand zwischen zwei Inline-Elementen. Hier an echten Dateien gemessen, samt dem, was Brotli ohnehin gespart hätte.ErklärungWie Instagram-Schriften wirklich funktionieren (es sind keine Schriften)Nichts wird formatiert. Jeder Buchstabe wird durch ein anderes Unicode-Zeichen ersetzt, das zufällig fett oder kursiv aussieht — weshalb ein Screenreader Kauderwelsch vorliest und manche Geräte leere Kästchen zeigen.