Tools · CSS · CSS-Verlauf erstellen
CSS-Verlauf erstellen
Erstelle einen linearen, radialen oder konischen CSS-Verlauf, und kopiere den Code.
Füge eine Datei hinzu und starte das Tool.
Deine Datei ist bereit.
Versuch eine andere Datei, oder versuch es erneut.
Einstellungen
Passe die Einstellungen unten an. Das Ergebnis aktualisiert sich dabei.
Läuft komplett im Browser. Es wird nichts hochgeladen.
Läuft komplett im Browser. Nichts wird je auf einen Server hochgeladen.
So funktioniert es
Linear, radial oder konisch wählen, und den Winkel oder die Position einstellen.
Farbstopps hinzufügen oder entfernen (2 bis 8 davon), dann mit den Reglern Position und Deckkraft jedes einzelnen einstellen.
Das generierte CSS kopieren.
Häufige Fragen
Linear, radial und konisch, jeweils mit bis zu 8 Farbstopps.
Ja, der Kopieren-Button legt den vollständigen Verlaufs-String in deine Zwischenablage, bereit zum Einfügen.
Ja, sofern dein Browser die CSS-Funktion oklch() unterstützt - das wird automatisch erkannt und nur angeboten, wenn es wirklich funktioniert.
Nein. Hier gibt es überhaupt keine Datei zum Hochladen - der Verlauf wird vollständig in deinem Browser erzeugt und angezeigt.
Anleitungen
Ein genauerer Blick auf einzelne Probleme, die dieses Tool löst.
Why Hand-Writing a CSS Gradient Rarely Looks Like What You Pictured
linear-gradient(135deg, #ff7a59, #ffd166) tells you nothing about what it looks like until it renders. Here's why gradient syntax is genuinely hard to picture in your head, and what actually helps.
Anleitung lesenHow to Build a Radial Gradient in CSS Without Guessing Positions
Radial gradients spread color out from a point instead of across a line - useful for spotlight effects, glows, and vignettes. Here's how to build one and actually control where it centers.
Anleitung lesenWhat a CSS Gradient Fallback Color Actually Does (and Why It's There)
Every copied gradient comes with a plain background: #hex; line above the gradient itself. Here's what it's actually protecting against, and why it's still worth keeping even on a modern site.
Anleitung lesen
Kommentare