▤

CSS Gradient Generator

Erstelle einen linearen oder radialen Verlauf mit Live-Vorschau und kopiere das CSS.

Deine Dateien bleiben auf diesem Gerät

Dateien werden im Browser verarbeitet, nie hochgeladen. Die Website lädt den benötigten Code und die Ressourcen herunter. Ohne Konto und Tracker.

Speichere dieses Tool über Herunterladen als einzelne HTML-Datei zur Offline-Nutzung.

Datenschutz →

Typ

Winkel (90°)

Farbe 1 Position 1 (0%)

Farbe 2 Position 2 (100%)

Ausgabe

Probiere ein durchgerechnetes Beispiel

Beispiel

Wähle den linearen Typ, setze den Winkel auf 135 und die Farben auf #ff7e5f und #feb47b. Das CSS lautet background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. Verschiebst du den ersten Stopp auf 20, bleibt die erste Farbe auf den ersten 20 % der Fläche einfarbig.

Gut zu wissen

0deg zeigt nach oben und 90deg nach rechts, daher verläuft 135deg von der oberen linken zur unteren rechten Ecke. Steht Text auf einem Verlauf, prüfe seinen Kontrast gegen beide Endfarben.

Über dieses Tool

Erstelle einen zweifarbigen linearen oder radialen Verlauf, indem du Farben, Positionen und einen Winkel wählst, und kopiere dann die background-Regel. Die Live-Vorschau läuft vollständig in deinem Browser.

Häufig gestellte Fragen

Was ist der Winkel bei einem linearen Verlauf?

Der Winkel legt die Richtung des Farbübergangs fest: 0° zeigt nach oben, 90° nach rechts, 180° nach unten und so weiter.

Wann sollte ich radial statt linear verwenden?

Verwende radial, um Farben von einem Mittelpunkt aus nach außen abstrahlen zu lassen (wie ein Scheinwerfer); linear mischt sie entlang einer geraden Linie.