Webentwicklung
CSS Gradient Generator
Einen linearen, radialen oder konischen Verlauf aus mehreren Farben zusammenstellen und das fertige CSS erhalten.
0° — oben, dann im Uhrzeigersinn.
A CSS gradient is a smooth transition between multiple colors, generated by the browser itself with no image needed. This tool lets you visually build a linear, radial, or conic gradient and copy the finished CSS instantly.
How to use it
- Add color stops and drag them to fine-tune where each transition happens.
- Pick a gradient type — linear (a direction in degrees), radial (shape and center position), or conic (rotation around a point).
- Copy the finished CSS with one click and paste it into background or background-image.
Common uses
- Picking a background for a hero section or button without opening a graphics editor.
- Recreating a gradient from a design mockup (Figma, etc.) in exact CSS syntax.
- Quickly experimenting with color transitions before locking a choice into a design system.
Things to keep in mind
A radial gradient defaults to stretching into the shape of its element (an ellipse), not always staying a circle — worth accounting for on rectangular blocks.
Multiple gradients can be layered by listing them comma-separated in background-image — it works like stacked layers, with the first one in the list on top.
Artikel zu diesem Tool: CSS-Verläufe: wie sich linear von radial und conic unterscheidet
Häufig gestellte Fragen
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Lineare Verläufe gehen entlang einer geraden Linie in einem gewählten Winkel über, radiale Verläufe breiten sich von einem Mittelpunkt aus als Kreis oder Ellipse aus, und konische Verläufe fahren Farben um einen Mittelpunkt herum wie ein Farbrad.
Werden konische Verläufe in allen Browsern unterstützt?
Alle aktuellen gängigen Browser unterstützen konische Verläufe, aber es ist eine neuere CSS-Funktion als lineare oder radiale Verläufe, sodass sehr alte Browserversionen sie möglicherweise nicht darstellen.
Was erhalte ich als Ausgabe?
Das Tool generiert einsatzbereite CSS-background-Syntax mit Ihren gewählten Farben, Stopps und Positionen, die Sie direkt in Ihr Stylesheet einfügen können.
Was unterscheidet repeating-linear-gradient von einem gewöhnlichen linear-gradient?
Ein gewöhnlicher linear-gradient streckt seine Farbabfolge genau einmal über das gesamte Element, während repeating-linear-gradient dieselbe Abfolge von Color Stops zyklisch wiederholt und so einen gestreiften oder gemusterten Hintergrund erzeugt.
Kann ich mehrere Verläufe als Hintergrund übereinanderlegen?
Ja, die Eigenschaft background-image akzeptiert eine durch Kommas getrennte Liste von Verläufen, und sie werden übereinandergelegt wie mehrere Hintergrundbilder — der erste in der Liste erscheint ganz oben.