CSS-Gradient-Generator
Schöne CSS-Verläufe visuell erstellen. Linearen, radialen oder konischen Typ wählen, Farbstopps hinzufügen, Winkel anpassen und Live-Vorschau sehen. CSS mit einem Klick kopieren.
Farbstopps
Vorschau
CSS
Alles läuft in Ihrem Browser — keine Daten werden gesendet.
So verwendest du den Gradient-Generator
- Wähle den Verlaufstyp — linear, radial oder konisch.
- Lege Farben und Positionen mit den Farbauswählern und Stopp-Schiebereglern fest.
- Passe den Winkel (linear) oder die Form (radial) an, dann kopiere das CSS.
CSS-Verläufe erklärt
CSS-Verläufe werden vom Browser mathematisch gerendert, nicht als Pixel — daher sind sie unendlich skalierbar und laden sofort.
Lineare Verläufe sind am häufigsten. Mit mehreren Stopps lassen sich komplexe Effekte wie Sonnenaufgangshimmel oder Markenverläufe erstellen.
Konische Verläufe rotieren Farben um einen Mittelpunkt — ideal für Kreisdiagramme, Farbräder und Strahlenmuster.
Häufig gestellte Fragen
Was ist ein CSS-Verlauf? ▼
Ein flüssiger Farbübergang, der in CSS mit linear-gradient(), radial-gradient() oder conic-gradient() erzeugt wird — keine Bilddatei nötig.
Unterschied zwischen linear, radial und konisch? ▼
Linear: entlang einer geraden Linie. Radial: von einem Mittelpunkt nach außen. Konisch: um einen Mittelpunkt wie ein Farbrad.
Wie ändere ich den Winkel eines linearen Verlaufs? ▼
Winkelfeld verwenden (0–360°). Bei 90deg geht der Verlauf von links nach rechts; bei 180deg von oben nach unten.
Was sind Farbstopps? ▼
Jeder Stopp definiert eine Farbe und ihre Position (0%–100%). Mehrere Stopps erzeugen mehrfarbige Verläufe.
Wie erstelle ich einen transparenten Verlauf? ▼
Alpha eines Farbstopps auf 0 setzen mit rgba() oder dem CSS-Schlüsselwort transparent.
Browserkompatibilität von CSS-Verläufen? ▼
Alle modernen Browser unterstützen lineare, radiale und konische Verläufe ohne Vendor-Präfixe.
Kann ich Verläufe als Textfüllungen verwenden? ▼
Ja: background auf den Verlauf setzen, dann background-clip: text und color: transparent anwenden.
Wie erstelle ich einen wiederholenden Verlauf? ▼
repeating-linear-gradient() oder repeating-radial-gradient() mit definierten Farbstopps verwenden.
Ähnliche Tools
Box-Shadow-Generator
Gestalte CSS-Box-Shadows visuell mit Live-Vorschau. Passe Versatz, Weichzeichnung, Ausbreitung und Farbe an und kopiere das fertige CSS sofort.
Glassmorphismus-Generator
Generiere CSS-Glassmorphismus-Effekte mit Unschärfe- und Transparenzsteuerung. Live-Vorschau und kopierfertiges CSS für Milchglas-UI-Designs.
CSS-Dreieck-Generator
Erstelle reine CSS-Dreiecke mit dem Border-Hack. Wähle Richtung, Größe und Farbe mit visueller Vorschau und kopierfertigem CSS.