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 Chromoforge-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): Übergänge entlang einer durch einen Winkel definierten Achse (0deg = unten nach oben, 90deg = links nach rechts). Ideal für Sektionshintergründe und Schaltflächen. - Radial (
radial-gradient): Strahlt von einem Mittelpunkt nach außen. Perfekt für Lichteffekte, Abzeichen und Icons. - Konisch (
conic-gradient): Dreht sich wie ein Farbkreis um einen Punkt. Nützlich für CSS-Kreisdiagramme und dekorative Effekte.
Du kannst beliebig viele Color Stops hinzufügen, ihre Position in Prozent oder px/rem angeben und erhältst 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 erhöhen.
- Schaltflächen mit 3D-Effekt: Ein Verlauf von oben nach unten auf einer Schaltfläche 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 Übergänge 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 Bändern", die bei Verläufen zu Transparent erscheinen: Sie entstehen durch Interpolation im sRGB-Farbraum. Um sie zu vermeiden, interpoliere in oklch oder füge einen Zwischenstopp bei 50% hinzu.
Kann man CSS-Verläufe animieren?
Verläufe sind nicht direkt über Standard-CSS-Transitions animierbar. Die performanteste Technik ist die Animation der background-position-Eigenschaft auf einem größeren Verlauf. Alternativ animiere CSS Custom Properties und generiere den Verlauf aus Variablen — moderne Browser unterstützen 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 Übergang ohne Mischung: linear-gradient(red 50%, blue 50%). Nützlich für Streifen und geometrische Designs. Ein normaler weicher Verlauf mischt Farben über die gesamte Entfernung zwischen Stops.