CSS-Gradient-Generator
CSS-Gradient-Generator: linearen, radialen oder konischen Farbverlauf mit beliebig vielen Farben zusammenstellen, live ansehen und den CSS-Code kopieren.
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
CSS-Farbverlauf erstellen
Der CSS-Gradient-Generator stellt einen CSS-Farbverlauf aus beliebig vielen Farbstopps zusammen und zeigt das Ergebnis sofort. Sie wählen zwischen linear-gradient (Verlauf entlang einer Linie), radial-gradient (Verlauf von einem Mittelpunkt nach außen) und conic-gradient (Verlauf um einen Mittelpunkt herum, etwa für Tortendiagramme oder Farbkreise). Den fertigen Code kopieren Sie mit einem Klick in Ihr Stylesheet.
Beim linearen Verlauf bestimmt der Winkel die Richtung: 0deg verläuft nach oben, 90deg nach rechts, 180deg nach unten. Ohne Angabe nimmt der Browser to bottom, also 180 Grad. Die Prozentwerte legen fest, wo eine Farbe ihre volle Stärke erreicht. Zwei Stopps an derselben Position erzeugen eine harte Kante statt eines weichen Übergangs, so entstehen Streifen. Mit der Option „Wiederholend“ wird daraus repeating-linear-gradient, das Muster wiederholt sich dann bis zum Rand, sofern der letzte Stopp unter 100 Prozent liegt.
Verläufe sind Hintergrundbilder, daher gehören sie in background oder background-image, nicht in background-color. Der Generator schreibt zusätzlich eine einfarbige Ersatzfarbe davor. Alle aktuellen Browser unterstützen die drei Verlaufsarten ohne Herstellerpräfix.
Anleitung: CSS-Gradient-Generator in 4 Schritten
- Unter „Art des Verlaufs“ linear-gradient, radial-gradient oder conic-gradient wählen oder eine „Vorlage“ laden.
- Winkel, Form und Mittelpunkt einstellen, je nachdem, welche Verlaufsart gewählt ist.
- Die Farbstopps mit Farbe und Position in Prozent festlegen, mit „Farbe hinzufügen“ ergänzen oder mit „Reihenfolge umkehren“ drehen.
- Optional „Wiederholend“ aktivieren, das Ergebnis in der „Vorschau“ prüfen und den „CSS-Code“ kopieren.
Typische Anwendungsfälle
- Hintergrund für Hero-Bereiche: Einen dezenten linearen CSS-Farbverlauf als Seitenhintergrund erstellen.
- Bilder ausblenden: Einen Verlauf von transparent zu einer Farbe über ein Foto legen, damit Text darauf lesbar bleibt.
- Streifenmuster: Mit gleichen Positionen und „Wiederholend“ harte Streifen ohne Bilddatei erzeugen.
- Torten- und Farbkreise: Mit conic-gradient einfache Kreisdiagramme oder Farbräder bauen.
Häufige Fragen
Wie schreibe ich einen einfachen Farbverlauf in CSS?
Zum Beispiel background: linear-gradient(90deg, #e8541c, #1c6be8); Das ergibt einen Verlauf von links nach rechts. Weitere Farben hängen Sie mit Komma an.
Wie bekomme ich harte Streifen statt eines weichen Übergangs?
Setzen Sie zwei Farbstopps auf dieselbe Position, etwa #e8541c 50% und #1c6be8 50%. An dieser Stelle wechselt die Farbe dann ohne Übergang.
Kann ich einen Verlauf mit Transparenz erstellen?
Ja. Geben Sie eine Farbe mit Alpha-Kanal ein, zum Beispiel #00000000 oder rgb(0 0 0 / 0). So lassen sich Bilder zum Rand hin ausblenden oder Text auf Fotos besser lesbar machen.
Warum wirkt der Übergang in der Mitte grau oder matt?
Browser mischen Verläufe standardmäßig im sRGB-Farbraum. Zwischen gegensätzlichen Farben entsteht dabei ein gräulicher Mittelton. Ein zusätzlicher Farbstopp in der Mitte mit einer kräftigen Zwischenfarbe behebt das.
Kann man einen CSS-Farbverlauf auf Text anwenden?
Ja. Setzen Sie den Verlauf als background, dazu background-clip: text (für ältere Browser zusätzlich -webkit-background-clip: text) und color: transparent. Dann füllt der Verlauf nur die Buchstaben.
Wie animiere ich einen Farbverlauf in CSS?
Verläufe selbst lassen sich nicht direkt per transition überblenden. Üblich ist, den Hintergrund größer als das Element zu machen und background-position zu animieren, oder die Farben als registrierte Custom Properties mit @property zu animieren.
Das könnte auch helfen
Farbumwandler
HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.
ÖffnenFarbpalette aus Bild
Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.
ÖffnenKontrast prüfen (WCAG)
Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.
ÖffnenBox-Shadow-Generator
CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.
ÖffnenFlexbox-Generator
Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.
ÖffnenCSS-Grid-Generator
Spalten, Zeilen und Abstände für CSS Grid festlegen, Vorschau prüfen und CSS kopieren.
Öffnen