CSS Gradient Generator

How to Build a CSS Gradient

This generator writes the CSS you would otherwise type by hand. Choose linear or radial, set the angle for linear gradients, and give each colour stop a colour and a position between 0 and 100 percent. The preview box repaints on every change, so you see the result before you copy anything. The code block contains three lines: a solid fallback colour for browsers that ignore gradients, the -webkit- prefixed gradient for older WebKit engines, and the standard gradient property. Stops are sorted by position before they are written out, so the output is always valid CSS even if you enter the stops in a different order; positions are clamped to the 0-100% range and rounded to one decimal. The tool writes plain CSS declarations only — it does not generate Tailwind classes, handles, or SVG gradients.

So bauen Sie einen CSS-Verlauf

Dieser Generator schreibt das CSS, das Sie sonst von Hand tippen würden. Wählen Sie linear oder radial, stellen Sie bei linearen Verläufen den Winkel ein und geben Sie jedem Farbstopp eine Farbe und eine Position zwischen 0 und 100 Prozent. Die Vorschau wird bei jeder Änderung neu gezeichnet, Sie sehen das Ergebnis also vor dem Kopieren. Der Codeblock enthält drei Zeilen: eine einfarbige Fallback-Farbe für Browser ohne Verlaufs-Unterstützung, den Verlauf mit -webkit-Präfix für ältere WebKit-Engines und die Standard-Eigenschaft. Die Stopps werden vor der Ausgabe nach Position sortiert, das Ergebnis ist also gültiges CSS, auch wenn Sie die Stopps in anderer Reihenfolge eingeben; Positionen werden auf 0-100% begrenzt und auf eine Dezimalstelle gerundet. Das Tool schreibt reine CSS-Deklarationen — es erzeugt keine Tailwind-Klassen, keine Handles und keine SVG-Verläufe.