CSS-Verlauf-Generator

Stops und Winkel einstellen, die Zeile in die Stylesheet-Datei legen. Kein Photoshop-Verlauf auf Pixeln.

Hero-Hintergrund, Button-Hover, eine Fläche ohne Bild: CSS-Verlauf als Zeile.

Stops und Winkel werden zu linear-gradient oder radial. Kein Mesh wie in Design-Tools.

linear und radial

• Schnell im Browser iterieren.
• Farben: Palette, Pipette
• Textlesbarkeit: Kontrastprüfer

Schatten: box-shadow. Maße: CSS-Einheiten.

Kein Pixelverlauf

Fotos mit Verlaufsfilter gehören in den Bildeditor, nicht hier.

Keine Übertragung.

Ablauf und Stolpersteine

1. Zwei bis drei Stops, Winkel setzen, Zeile kopieren.
2. Text auf dem Verlauf: Kontrast an der ungünstigsten Mitte, nicht am Rand.
3. Bilder mit Farbverlauf bleiben Pixeljobs — Kompressor und Formatwandler, nicht CSS.

Stolperstein: repeating-linear-gradient in alten Outlook-Clients. Newsletter wollen oft ein PNG, das Sie unter SVG nach PNG oder im Bildwerkzeug erzeugen.

In der Praxis

Zwei Stops und 135 Grad reichen für die meisten Buttons. Mesh-Verläufe aus Figma müssen Sie zerlegen oder als PNG legen. Newsletter-Outlook mag oft kein CSS-Gradient — dann ein schmales PNG aus SVG nach PNG, nicht diese Zeile.