Gestalte lineare und radiale Farbverläufe visuell, wähle aus Vorlagen und kopiere den fertigen CSS-Code.
Gestalte lineare und radiale Farbverläufe visuell, wähle aus Vorlagen und kopiere den fertigen CSS-Code. Geeignet für Alltag, Entwicklung, Lernen und schnelle Prüfungen.
Dieses Tool läuft im Browser. Prüfe vor sensiblen Daten, ob du deinem Gerät und Browser vertraust.
Ein CSS-Verlauf ist ein Bild, das der Browser live zeichnet: Er kommt in background oder background-image, braucht keinen zusätzlichen Download und bleibt in jeder Größe scharf. Die lineare Syntax lautet linear-gradient(Winkel, Farbstopp 1, Farbstopp 2, …). 0deg verläuft von unten nach oben, 90deg von links nach rechts und der Standardwert 180deg von oben nach unten; 135deg ergibt die beliebte Diagonale von links oben nach rechts unten. Ein radial-gradient breitet sich von einem Mittelpunkt aus und eignet sich für Spotlights, Leuchteffekte oder plastische Buttons.
Ein Farbstopp besteht aus Farbe und Position, etwa #f59e0b 0% und #10b981 100%. Zusätzliche Stopps dazwischen steuern den Rhythmus des Übergangs; zwei Stopps an derselben Position (zum Beispiel 50% und 50%) lassen die Farbe abrupt wechseln und erzeugen scharfe Streifen oder geteilte Hintergründe. In diesem Tool hat jeder Stopp eigene Position und Deckkraft; die Deckkraft wird als rgba() ausgegeben – praktisch für Overlays, die weißen Text auf Fotos lesbar halten.
Ein paar Praxistipps: Liegen die Enden eines großflächigen Verlaufs weit auseinander auf dem Farbkreis, wird die Mitte leicht grau und trüb – eine Zwischenfarbe oder näher beieinanderliegende Farbtöne helfen. Sehr dezente Verläufe zeigen auf manchen Bildschirmen sichtbare Stufen (Banding); etwas mehr Farbunterschied oder ein dritter Stopp schaffen Abhilfe. Für Verlaufstext setzt man den Verlauf als Hintergrund und kombiniert ihn mit background-clip: text und color: transparent.
Moderne Browser unterstützen linear-gradient und radial-gradient seit Jahren ohne Präfix, das kopierte CSS funktioniert also direkt ohne -webkit-. Starte mit einer Vorlage, passe Winkel und Stopps an, prüfe die Live-Vorschau und kopiere den Code mit einem Klick.
0deg verläuft von unten nach oben, 90deg von links nach rechts, 180deg (Standard) von oben nach unten und 270deg von rechts nach links. 135deg ist eine Diagonale von links oben nach rechts unten.
Setze zwei benachbarte Stopps auf dieselbe Position, etwa Rot 50% und Blau 50%. Die Farbe wechselt dort abrupt statt zu verlaufen.
Lege einen linearen Verlauf von transparent zu halbtransparentem Schwarz darüber, etwa rgba(0,0,0,0) bis rgba(0,0,0,0.6), damit der Textbereich dunkler wird.
Nein. Alle großen Browser unterstützen die Standardsyntax seit Jahren; linear-gradient und radial-gradient genügen.
Kategorie ansehen: Design & Farben
Rechne Farbwerte zwischen HEX, RGB, HSL und CMYK um und prüfe barrierefreie Kontrastverhältnisse nach WCAG 2.1.
Gestalte Box-Shadows und moderne Milchglas-Effekte mit sofortigem Kopieren des generierten CSS-Codes.
Prüfe Kontrastverhältnisse zwischen Text und Hintergrund mit AA/AAA-Bewertung und Farbfehlsichtigkeits-Filter.
Erzeuge Partikel, elastische Körper, Kollisionen und Gravitationsfelder in Echtzeit mit HTML5 Canvas.
