CSS-Verlaufsgenerator — Kostenlos Online
Erstellen Sie schöne lineare, radiale und konische CSS-Verläufe mit Live-Vorschau. CSS-Code sofort kopieren.
Who uses the CSS-Verlaufsgenerator?
- Frontend-Entwickler, die Hintergrundverläufe für Hero-Bereiche und UI-Komponenten erstellen.
- Designer, die verlaufsbasierte visuelle Identitäten und Markenfarbübergänge prototypisieren.
- CSS-Lernende, die die Verlaufssyntax durch einen visuellen, interaktiven Builder verstehen.
How the CSS-Verlaufsgenerator works
Wählen Sie den Verlaufstyp: Linear, Radial oder Conic.
Klicken Sie auf das Farbfeld eines Farbstopps, um seine Farbe über den Farbwähler zu ändern.
Verwenden Sie den Regler neben jedem Stopp, um seine Position anzupassen, oder klicken Sie auf „+ Add color stop“ für einen neuen.
Passen Sie den Winkel an (linear/conic) und kopieren Sie dann den CSS-Code aus dem Ausgabefeld.
Tips & tricks
- Sie benötigen mindestens 2 Farbstopps — die Entfernen-Schaltfläche (×) erscheint erst ab 3 oder mehr Stopps.
- Radiale Verläufe blenden die Winkelsteuerung aus, da ein zentrierter kreisförmiger Verlauf keine Richtung zum Einstellen hat.
- Stopps werden im Ausgabe-CSS immer in Positionsreihenfolge dargestellt, unabhängig von der Reihenfolge, in der Sie sie hinzugefügt haben.
- Der Farbwähler unterstützt keinen Alphakanal/Transparenz — fügen Sie rgba() manuell im kopierten CSS hinzu, falls Sie einen transparenten Stopp benötigen.
Frequently Asked Questions
Was ist die CSS-Syntax für einen linearen Verlauf?
background: linear-gradient(Richtung, Farbe1, Farbe2). Beispiel: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%). Die Richtung kann ein Winkel (45deg) oder ein Schlüsselwort (to right, to bottom right) sein.
Wie erstelle ich einen radialen Verlauf?
background: radial-gradient(Form Größe at Position, Farbe1, Farbe2). Beispiel: background: radial-gradient(circle at center, #f6d365 0%, #fda085 100%). Dieses Tool generiert einen zentrierten kreisförmigen radialen Verlauf.
Kann ich mehr als zwei Farbstopps hinzufügen?
Ja. Klicken Sie so oft wie nötig auf „+ Add color stop“. Jeder Stopp hat einen eigenen Farbwähler und Positionsregler, und die Stopps werden im Ausgabe-CSS automatisch nach Position sortiert.
Wie erstelle ich einen transparenten Verlauf?
Verwenden Sie rgba() oder Hex mit Alpha für transparente Stopps. Beispiel: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%) erzeugt eine Verdunklung — häufig als Overlay auf Hero-Bildern für Textlesbarkeit verwendet. Der Farbwähler dieses Tools enthält keinen Alphakanal, bearbeiten Sie also das kopierte CSS manuell für Transparenz.
Funktioniert der CSS-Verlauf in allen Browsern?
CSS-Verläufe werden in allen modernen Browsern (Chrome, Firefox, Safari, Edge, Opera) unterstützt. Ein Hersteller-Präfix (-webkit-) ist für moderne Browser nicht zwingend nötig, obwohl dieses Tool zur Abdeckung älterer Browser eine Zeile mit -webkit--Präfix in die Ausgabe einbindet.
Is my data safe when using the CSS-Verlaufsgenerator?
Completely safe. The CSS-Verlaufsgenerator processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the CSS-Verlaufsgenerator output in commercial projects?
Yes. The CSS-Verlaufsgenerator is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the CSS-Verlaufsgenerator follow official standards?
Yes. The CSS-Verlaufsgenerator is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.