CSS Farbverlauf-Generator
Erstellen Sie lineare oder radiale CSS-Farbverläufe mit einer Live-Vorschau und kopierfertigem Code.
Kurze Antwort: CSS-Farbverlauf-Generator: Erstellen Sie lineare oder radiale CSS-Farbverläufe mit Live-Vorschau und kopierfertigem Code. Läuft vollständig in Ihrem Browser, kostenlos und ohne Anmeldung.
Zuletzt aktualisiert
Gut zu wissen
The mechanics that trip people up are direction and stop placement. In CSS a linear gradient angle is measured clockwise from the top: 0deg points up, 90deg points right, 180deg down. Radial gradients instead radiate from a center point outward, which makes them ideal for spotlights, soft vignettes and button glows where linear direction would look wrong.
Watch for the gray dead zone. Interpolating between two saturated but complementary hues — say blue to orange — routes the midpoint through a muddy gray in the default sRGB space. Nudging the stops or picking colors closer on the wheel keeps the blend lively; browsers that support in oklch interpolation produce noticeably cleaner transitions for far-apart hues.
For a smooth backdrop, keep contrast low and the angle shallow so banding stays invisible on wide screens; for a punchy accent, push the stops apart and raise the angle. Gradients are also purely decorative to assistive tech, so never rely on one to convey meaning — any text on top still has to clear the WCAG contrast threshold against the darkest part of the blend.
Pair this with a palette workflow: derive harmonious endpoints in the Color Palette Generator, then drop them in here to turn a two-color scheme into a background.
Häufig gestellte Fragen
- Ist der Gradient-Generator kostenlos?
- Ja — kostenlos ohne Anmeldung.
- Linear oder radial?
- Beides — wechsle zwischen linearen und radialen Gradienten mit dem Typ-Auswahlfeld.
- Kann ich mehr als zwei Farbstops hinzufügen?
- Die aktuelle Version unterstützt zwei Stops; das resultierende CSS ist leicht manuell zu erweitern, wenn du mehr benötigst.
- Funktioniert die Ausgabe überall?
- Ja — die Syntax ist einfaches CSS, das von jedem Browser unterstützt wird, der seit 2014 ausgeliefert wird.
- Werden meine Farben hochgeladen?
- Nein — die Vorschau und die CSS-Generierung laufen vollständig in deinem Browser.