CSS-Gradient-Generator
Wähle einen Gradient-Typ, passe Winkel und Farbstopps an und kopiere einsatzbereites CSS oder einen Tailwind-Arbitrary-Value. Die Vorschau aktualisiert sich beim Bearbeiten.
Kostenlos Läuft lokal Ohne Anmeldung
Vorlagen
Farbstopps
0%
50%
100%
CSS
linear-gradient(135deg, #7F52FF 0%, #B9A3FF 50%, #0B0B10 100%)
Tailwind
bg-[linear-gradient(135deg,_#7F52FF_0%,_#B9A3FF_50%,_#0B0B10_100%)]
Farben werden als Hex-Werte geschrieben; die Vorschau aktualisiert sich beim Bearbeiten.
So funktioniert es
1
Typ wählen
Wechsle zwischen linearen, radialen und konischen Gradients und stelle den Winkel ein.
2
Stopps anpassen
Wähle Farben, verschiebe ihre Positionen und füge bis zu fünf Stopps hinzu.
3
Code kopieren
Kopiere die CSS-Regel oder den Tailwind-Arbitrary-Value und füge sie in dein Projekt ein.
Warum dieses Werkzeug
Drei Gradient-Typen
Lineare, radiale und konische Gradients nutzen einen Editor und eine Live-Vorschau.
Tailwind-Ausgabe
Neben dem reinen CSS-Wert bekommst du eine fertige bg-[…]-Klasse zum Einfügen.
Vorlagen und Zufall
Starte mit einer Vorlage oder würfle eine zufällige Palette, wenn du Inspiration brauchst.
Häufige Fragen
Welche Browser unterstützen konische Gradients?
Alle aktuellen Versionen von Chrome, Edge, Firefox und Safari unterstützen conic-gradient. Ältere Browser zeigen keinen Hintergrund, lege also eine Volltonfarbe darunter.
Wie nutze ich den Tailwind-Wert?
Füge die erzeugte bg-[…]-Klasse in dein HTML oder JSX ein. Leerzeichen werden durch Unterstriche ersetzt, so maskiert Tailwind Arbitrary Values.
Sind transparente Farben möglich?
Ja, der Farbwähler schreibt achtstellige Hex-Werte mit Alphakanal, die CSS und Tailwind beide akzeptieren.
Warum ist der Winkel bei radialen Gradients deaktiviert?
Ein radialer Gradient breitet sich von einem Mittelpunkt aus, es gibt also keine Richtung zum Drehen. Der Winkel gilt weiterhin für lineare und konische Gradients.
Wird etwas hochgeladen?
Nein. Der Gradient wird in deinem Browser erzeugt und nie an einen Server geschickt.
Ähnliche Werkzeuge
Farbe & Design Farbumrechner Wandle Farben zwischen HEX, RGB, HSL und HSV um, picke im Farbrad und kopiere fertige Werte für CSS und Design-Tools. Farbe & Design Kontrast-Checker Prüfe das Kontrastverhältnis zwischen Text- und Hintergrundfarbe und sieh sofort, ob WCAG AA und AAA für normalen und großen Text erfüllt sind. Bildwerkzeuge Bildformat konvertieren Konvertiere PNG-, JPG- und WebP-Bilder im Browser. Wähle Ausgabeformat und Qualität, behalte Transparenz wo möglich und lade sofort herunter. Entwicklerwerkzeuge Base64 Encoder & Decoder Text in Base64 kodieren oder Base64 zurück in Text dekodieren – mit vollem UTF-8- und URL-safe-Support. Läuft lokal im Browser, ohne Upload. Textwerkzeuge Text in Groß- und Kleinschreibung umwandeln Wandle Text blitzschnell zwischen GROSSBUCHSTABEN, Kleinbuchstaben, Title Case, Satzschreibweise, camelCase, PascalCase, snake_case und kebab-case um. Umrechner Datumsrechner Berechne die Differenz zwischen zwei Daten, addiere oder subtrahiere Tage, Monate und Jahre und ermittle das genaue Alter. Alles läuft im Browser.
Zuletzt aktualisiert: