CSS-Gradient-Generator — linear, radial & konisch, mit Live-Vorschau
Erstelle lineare, radiale und konische Farbverläufe mit verschiebbaren Farbstopps, Winkelrad und Vorlagen. Kopiere das CSS oder eine Tailwind-Klasse.
background: #54a5d8; background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 55%, #a7f3d0 100%);
bg-[linear-gradient(135deg,#4f46e5_0%,#06b6d4_55%,#a7f3d0_100%)]
Die erste Zeile ist ein einfarbiger Fallback (der Mittelwert deiner Stopps) für E-Mail-Programme und sehr alte Browser, die Verläufe ignorieren.
Läuft komplett in deinem Browser. Nichts, was du eingibst, wird an uns gesendet oder gespeichert. Alle kostenlosen Tools ansehen.
Ein Problem gefunden oder etwas, das besser sein könnte? Wir lesen jede Nachricht und beheben Fehler schnell.
Dieser kostenlose CSS-Gradient-Generator erstellt lineare, radiale und konische Farbverläufe visuell und liefert dir das CSS zum Einfügen. Ziehe Farbstopps entlang der Leiste, klicke auf die Leiste, um weitere hinzuzufügen, stelle die Deckkraft jedes Stopps ein, dreh am Winkelrad – und die Vorschau aktualisiert sich laufend. Die Ausgabe enthält eine einfarbige Fallback-Farbe und eine Tailwind-Klasse mit Arbitrary Value und funktioniert so in reinem CSS, in einer Komponentenbibliothek oder einer Utility-First-Codebasis.
Farbverläufe sind einfache CSS-Bilder: Sie kosten keine Netzwerkanfrage, skalieren ohne Unschärfe auf jede Größe und lassen sich über Fotos oder andere Verläufe legen. Sie haben aber auch ihre Fallen: Ein Verlauf zwischen zwei gesättigten Komplementärfarben läuft in der Mitte durch ein trübes Grau, und Text auf einem Verlauf muss an dessen hellster Stelle genug Kontrast haben. Die Hinweise unten behandeln die Syntax, diese Fallstricke und wie wiederholende Verläufe Streifen erzeugen.
So funktioniert’s
- Wähle „Linear“, „Radial“ oder „Konisch“ und setze das Häkchen bei „Wiederholend“, wenn sich das Muster kacheln soll.
- Klicke auf einen Stopp auf der Leiste, um ihn auszuwählen, und ändere darunter Farbe, Position und Deckkraft. Klicke auf eine leere Stelle der Leiste, um einen Stopp hinzuzufügen; mit Entf entfernst du den ausgewählten.
- Lege die Richtung mit dem Winkelrad (ziehen oder Pfeiltasten) oder den Schnellwinkel-Buttons fest. Bei radial und konisch legst du den Mittelpunkt fest.
- Oder starte mit einer Vorlage und passe sie an.
- Kopiere das CSS (mit seiner Fallback-Zeile) oder die Tailwind-Klasse.
Häufige Fragen
Wie erstelle ich einen Farbverlauf in CSS?
Verwende eine Gradient-Funktion als Hintergrundbild: background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%); Das erste Argument ist die Richtung (ein Winkel oder Keywords wie to right), gefolgt von den Farbstopps, jeweils eine Farbe mit optionaler Position. radial-gradient() breitet sich von einem Punkt aus, conic-gradient() läuft um einen herum. Verläufe sind Bilder, gehören also in background oder background-image, nicht in background-color.
Was bedeutet der Winkel in linear-gradient?
Er ist die Richtung, in die der Verlauf läuft, im Uhrzeigersinn von oben gemessen: 0deg läuft von unten nach oben, 90deg von links nach rechts, 180deg von oben nach unten (der Standard, wenn du ihn weglässt) und 270deg von rechts nach links. Das unterscheidet sich von der mathematischen Konvention, bei der 0 Grad nach rechts zeigt – deshalb kommen Verläufe aus manchen Design-Tools gedreht heraus.
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Ein linearer Verlauf ändert die Farbe entlang einer Geraden. Ein radialer Verlauf ändert die Farbe von einem Mittelpunkt nach außen, als Kreis oder Ellipse, und sein Größen-Keyword (closest-side, farthest-corner usw.) bestimmt, wo der letzte Stopp landet. Ein konischer Verlauf ändert die Farbe um einen Mittelpunkt herum, wie die Zeiger einer Uhr – damit ist er das Werkzeug für Tortendiagramme, Farbkreise und Lade-Spinner.
Wie mache ich Streifen mit CSS-Verläufen?
Setze zwei Stopps an dieselbe Position, um statt eines Übergangs eine harte Kante zu bekommen, und wiederhole dann das Muster. Zum Beispiel erzeugt repeating-linear-gradient(45deg, #244b3f 0 10px, #e8f0ec 10px 20px) diagonale Streifen von 10px Breite. Die Vorlage „Streifen“ macht hier dasselbe mit Prozentwerten. In einem wiederholenden Verlauf ist der Abstand zwischen erstem und letztem Stopp die Länge einer Wiederholung.
Wie verwende ich einen Farbverlauf in Tailwind CSS?
Für einfache lineare Verläufe mit zwei oder drei Farben nimm die Utilities von Tailwind, etwa bg-gradient-to-r from-indigo-600 to-cyan-500 (bg-linear-to-r in Tailwind v4). Für alles andere – Winkel, radiale oder konische Verläufe, Stopps mit Deckkraft – nimm einen Arbitrary Value: die hier erzeugte Klasse, etwa bg-[linear-gradient(135deg,#4f46e5_0%,#06b6d4_55%)], in der Unterstriche für Leerzeichen stehen. Sehr lange Arbitrary Values sind schwer lesbar; erwäge, sie in deine Theme-Konfiguration zu verschieben.
Warum sieht mein Verlauf in der Mitte trüb oder grau aus?
Browser interpolieren Verläufe standardmäßig in sRGB, und die gerade Linie zwischen zwei gesättigten, fast gegensätzlichen Farben (Blau zu Gelb, Rot zu Grün) führt durch entsättigtes Grau. Füge einen mittleren Stopp mit einer sauberen Zwischenfarbe hinzu oder interpoliere in aktuellen Browsern in einem wahrnehmungsbasierten Farbraum: linear-gradient(90deg in oklch, blue, yellow). Banding in langen, subtilen Verläufen ist ein anderes Problem, verursacht durch 8-Bit-Farbe; eine leichte Rauschtextur über dem Verlauf kaschiert es.
Gradient-Syntax im Überblick
• linear-gradient(angle, stop, stop, ...): Winkel in deg oder turn oder ein Keyword wie to right oder to bottom left. Standard 180deg (von oben nach unten).
• radial-gradient(shape size at x y, stops): shape ist circle oder ellipse (Standard ellipse); size ist closest-side, closest-corner, farthest-side oder farthest-corner (Standard) oder explizite Längen; die Position ist standardmäßig center.
• conic-gradient(from angle at x y, stops): Stopps werden in Grad oder Prozent um den Kreis positioniert. Wiederhole die erste Farbe als letzten Stopp für einen nahtlosen Kreis.
• repeating-*-gradient(): gleiche Syntax; die Stopps wiederholen sich, so weit das Element reicht.
• Stopps: eine Farbe gefolgt von null, einer oder zwei Positionen. Zwei Positionen (red 20% 40%) erzeugen ein einfarbiges Band. Eine einzelne Position zwischen zwei Stopps (red, 30%, blue) verschiebt die Mitte des Übergangs.
• Transparenz: Stopps mit rgba() oder achtstelligem Hex. Blende in derselben Farbe auf transparent aus, also rgba(0,0,0,0) statt des Keywords transparent, das in alten Browsern transparentes Schwarz bedeutete und helle Verläufe vergraute.
Verläufe hinter Text: lesbar bleiben
Der Kontrast vor einem Verlauf ist nur so gut wie seine schlechteste Stelle. Prüfe deine Textfarbe im Kontrast-Checker gegen den hellsten Stopp (bei dunklem Text) bzw. den dunkelsten Stopp (bei hellem Text), nicht gegen den Durchschnitt.
Für Text über einem Foto ist ein dunkler Overlay-Verlauf die Standardlösung: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%) über dem Bild (die Vorlage „Ausblenden“) dunkelt nur den unteren Bereich ab, wo Bildunterschriften meist stehen. Setze ihn in der Hintergrundliste an die erste Stelle: background: linear-gradient(...), url(photo.jpg).
Das einfarbige Fallback im erzeugten CSS ist wichtig für HTML-E-Mails, bei denen viele Clients – allen voran Outlook unter Windows – Verläufe komplett ignorieren. Ohne Fallback kann weißer Text auf weißem Hintergrund landen.
Ähnliche kostenlose Tools
- Box-Shadow-Generator — Gestalte mehrschichtige box-shadow- und text-shadow-Effekte mit Live-Vorschau und Vorlagen für Elevation, Neumorphismus und Glow, und kopiere das CSS.
- Farbpaletten-Generator — Drück die Leertaste für eine neue Palette, fixiere die Farben, die dir gefallen, wähle eine Harmonie oder hol dir die Palette aus einem Foto. Export als CSS, Tailwind, SCSS, JSON oder PNG.
- Kontrast-Checker — Prüfe Text- und Hintergrundfarben nach WCAG 2.x AA und AAA, sieh den APCA-Lc-Wert und erhalte die nächstgelegene Farbe, die besteht.
- Farbwähler & Konverter — Nimm eine beliebige Farbe von irgendwo auf deinem Bildschirm auf oder rechne sofort zwischen HEX, RGB und HSL um.
- particles.js Playground — Bearbeite eine particles.js-Konfiguration mit Reglern oder rohem JSON, sieh sie live laufen und kopiere das JSON oder ein fertiges HTML-Snippet.