Web / CSS

CSS-Gradient-Generator

Erstelle lineare, radiale und optionale konische CSS-Farbverläufe mit Farbstopps, Winkel, Position und Live-Vorschau. Das Tool erzeugt direkt kopierbaren CSS-Code für Hintergründe, Karten, Buttons und Layoutbereiche.

Generator

Farbverlauf konfigurieren

Alle Eingaben werden lokal im Browser verarbeitet. Es werden keine Farben oder Codes an den Server übertragen.

Grunddaten
Farbstopps
%
%
%
%
Optionen
Gradient Preview linear-gradient

CSS-Ausgabe

Der Verlauf ist gültig.

Hinweise zur Verwendung

Linear

Lineare Farbverläufe eignen sich für Flächen, Buttons, Hero-Bereiche und leichte Tiefenwirkung.

Radial

Radiale Verläufe wirken wie ein Lichtpunkt und passen gut zu Karten, Overlays oder Hintergrundeffekten.

Farbstopps

Die Positionen sollten aufsteigend gesetzt werden. Enge Stopps erzeugen harte Kanten, weite Stopps weichere Übergänge.