CSS-Verlaufsgenerator
Erstelle lineare, radiale und konische CSS-Verläufe aus einer Palette.
Was diese Seite abdeckt
Diese Seite erklärt den Ablauf und verlinkt direkt auf den passenden Bereich des Chromaforge-Haupttools.
- Generiere Paletten aus einer Basisfarbe.
- Prüfe Kontrast vor dem Veröffentlichen von UI-Text.
- Exportiere CSS, Tailwind, SCSS, JSON, SVG und PNG.
- Läuft lokal im Browser.
Wie es funktioniert
Der Verlaufs-Generator erzeugt fertigen CSS-Code für drei native Verlaufstypen: linear, radial und konisch. Wähle deinen Typ, definiere Start- und Endfarben, dann passe Winkel oder Mittelpunkt an.
Für jeden Verlaufstyp:
- Linear (
linear-gradient): Ubergange entlang einer durch einen Winkel definierten Achse (0deg = unten nach oben, 90deg = links nach rechts). Ideal für Sektionshintergrunde und Schaltflachen. - Radial (
radial-gradient): Strahlt von einem Mittelpunkt nach aussen. Perfekt für Lichteffekte, Abzeichen und Icons. - Konisch (
conic-gradient): Dreht sich wie ein Farbkreis um einen Punkt. Nutzlich für CSS-Kreisdiagramme und dekorative Effekte.
Du kannst beliebig viele Color Stops hinzufugen, ihre Position in Prozent oder px/rem angeben und erhaltst sofort kopierfertigen CSS-Code. Die Echtzeit-Vorschau zeigt das exakte Browser-Rendering.
Praktische Beispiele
CSS-Verläufe ersetzen in vielen Kontexten Bilder vorteilhaft:
- Hero-Bereich: Ein subtiler linearer Verlauf auf dem Hintergrund der Hero-Sektion erzeugt Tiefe, ohne die Ladezeit zu erhohen.
- Schaltflachen mit 3D-Effekt: Ein Verlauf von oben nach unten auf einer Schaltflache simuliert Beleuchtung und macht sie "klickbarer".
- Farbiger Text: Mit
background-clip: textkann ein Verlauf direkt auf Text angewendet werden für einen markanten visuellen Effekt. - Abschnittstrennlinien: Verläufe von Farbe zu transparent schaffen sanfte Ubergange zwischen Sektionen ohne harte Linien.
- Fortschrittsanzeigen: Ein konischer Verlauf mit einem festen Color Stop simuliert einen reinen CSS-Fortschrittskreis.
FAQ — CSS-Verläufe
Wie erstellt man einen Verlauf mit Transparenz?
Verwende eine Farbe mit Alphakanal als Color Stop: rgba(0, 0, 0, 0) oder die moderne Syntax oklch(0 0 0 / 0). Achtung vor "grauen Bandern", die bei Verläufen zu Transparent erscheinen: Sie entstehen durch Interpolation im sRGB-Farbraum. Um sie zu vermeiden, interpoliere in oklch oder fuge einen Zwischenstopp bei 50% hinzu.
Kann man CSS-Verläufe animieren?
Verläufe sind nicht direkt uber Standard-CSS-Transitions animierbar. Die performanteste Technik ist die Animation der background-position-Eigenschaft auf einem groasseren Verlauf. Alternativ animiere CSS Custom Properties und generiere den Verlauf aus Variablen — moderne Browser unterstutzen dies.
Was ist der Unterschied zwischen einem "Hard Stop" und einem weichen Verlauf?
Ein "Hard Stop" platziert zwei Color Stops an derselben Position und erzeugt einen abrupten Ubergang ohne Mischung: linear-gradient(red 50%, blue 50%). Nutzlich für Streifen und geometrische Designs. Ein normaler weicher Verlauf mischt Farben uber die gesamte Entfernung zwischen Stops.
Funktioniert der generierte Code in allen Browsern?
Lineare und radiale Verläufe werden von allen modernen Browsern seit Jahren unterstutzt. Der konische Verlauf (conic-gradient) erfordert Chrome 69+, Firefox 83+, Safari 12.1+. Für sehr alte Browser sollte eine Fallback-Farbe (background-color) vor der Verlaufs-Eigenschaft angegeben werden.