So verwenden Sie CSS-Verlauf- und Schattengenerator
- 1
Verlauf oder Box-Schatten wählen
Wechseln Sie über die Tabs oberhalb der Vorschau zwischen den beiden Editoren.
- 2
Mit einer Vorlage starten
Klicken Sie auf eine Vorlage, um sie zu laden, oder behalten Sie die Standardeinstellung und passen Sie von dort aus an.
- 3
Visuell anpassen
Ziehen Sie Farbstopps und stellen Sie den Winkel ein, oder fügen Sie Schattenebenen hinzu und passen Sie Versatz, Unschärfe und Ausbreitung an.
- 4
Code kopieren
Kopieren Sie die CSS-Deklaration oder die Tailwind-Klasse und fügen Sie sie in Ihr Projekt ein.
Limits und Pro
Kostenlos ohne Registrierung: unbegrenzt viele Farbstopps und Schattenebenen, 3 Verlaufstypen, 3 Farbräume für die Farbmischung und 24 Vorlagen.
Pro entfernt die Werbung; beide Editoren sind in jedem Tarif vollständig. Pro ansehen
Über CSS-Verlauf- und Schattengenerator
Verläufe und Schatten sind die beiden CSS-Effekte, die am häufigsten per Ausprobieren in den Entwicklertools des Browsers angepasst werden. Dieser Generator bietet für beide einen visuellen Editor mit großer Live-Vorschau und schreibt dazu die exakte CSS-Deklaration sowie eine passende Tailwind-Klasse mit beliebigem Wert, etwa bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]. So können Sie das Ergebnis direkt in ein Stylesheet oder in ein className einfügen.
Der Verlaufseditor erstellt lineare, radiale und konische Verläufe. Klicken Sie auf die Stopp-Leiste, um an dieser Stelle eine Farbe hinzuzufügen, ziehen Sie einen Stopp, um ihn zu verschieben, oder nutzen Sie die Pfeiltasten für präzise Positionen. Jeder Stopp hat eine eigene Deckkraft. Lineare und konische Verläufe haben einen Winkel, radiale und konische Verläufe einen Mittelpunkt, radiale Verläufe zusätzlich die Form Kreis oder Ellipse, und jeder Verlauf kann sich für Streifen und Ringe wiederholen. Auch den Farbraum für die Farbmischung können Sie wählen: OKLab und OKLCH vermeiden die graue, schlammige Mitte, die klassisches sRGB-Mischen zwischen gesättigten Farben erzeugt, und werden von allen aktuellen Browsern unterstützt.
Der Box-Schatten-Editor stapelt so viele Ebenen, wie Sie brauchen. Jede Ebene hat X- und Y-Versatz, Unschärfe, Ausbreitung, eine Farbe mit Deckkraft, einen Schalter für Innen und einen für die Sichtbarkeit. Die Ebenen lassen sich umsortieren, denn die erste wird zuoberst gezeichnet. Eine Vorschau-Box mit einstellbarer Größe, einstellbarem Eckenradius und wählbaren Farben zeigt den Effekt auf hellem oder dunklem Untergrund.
Zwölf Vorlagen für jeden Editor – Sonnenuntergänge, Farbräder und Streifen; Material-Erhöhungen, mehrschichtige weiche Schatten, Neumorphismus und harte Versätze – bieten einen Ausgangspunkt. Das Tool deckt nur Verläufe und Box-Schatten ab; text-shadow, filter: drop-shadow und SVG-Verläufe werden nicht erzeugt.
Datenschutz
Alles geschieht direkt auf der Seite: Farben und Einstellungen verlassen Ihren Browser nicht, und es wird kein Bild hochgeladen. Ihr aktueller Verlauf und Ihr aktueller Schatten werden im lokalen Speicher abgelegt, damit sie beim nächsten Besuch noch da sind.
Funktionen
Linear, radial und konisch
Ziehbare Farbstopps mit Deckkraft, Winkel, Mittelpunkt, Form und wiederholendem Modus.
Schatten mit mehreren Ebenen
Schattenebenen stapeln, umsortieren, ausblenden und als Innenschatten setzen – für realistische Tiefe.
CSS und Tailwind
Kopieren Sie eine fertige Deklaration oder eine Tailwind-Klasse mit beliebigem Wert.