CSS-Verlaufsgenerator
Erstelle CSS-Verlaufscode sofort mit einem visuellen Editor.
Vorschau
CSS-Code
background: linear-gradient(to bottom right, #6366f1 0%, #ec4899 100%);
Was ist ein CSS-Verlauf?
CSS-Verläufe sind Farbübergänge, die direkt vom Browser ohne Bilder gerendert werden. Sie werden für Hintergründe, Ränder und UI-Effekte verwendet.
CSS-Verlaufstypen
Linearer Verlauf
Farben gehen entlang einer geraden Linie in einem bestimmten Winkel oder einer Richtung über. Definiert mit linear-gradient().
Radialer Verlauf
Farben strahlen von einem Mittelpunkt kreisförmig oder elliptisch nach außen. Definiert mit radial-gradient().
Konischer Verlauf
Farben rotieren um einen Mittelpunkt, ähnlich einem Kreisdiagramm. Definiert mit conic-gradient().
Anleitung
Wähle einen Verlaufstyp, passe Richtung oder Winkel an, füge Farbstopps hinzu oder entferne sie, und kopiere den generierten CSS-Code.
Tipps für CSS-Verläufe
Verwende rgba() oder Hex mit Alpha für transparente Verläufe. Überlagere mehrere Verläufe mit durch Komma getrennten Hintergründen.