Explosion Tools

CSS Gradient Generator — Farbverlaeufe erstellen

CSS-Farbverlaeufe visuell erstellen und den Code kopieren. Kostenlos, ohne Anmeldung, funktioniert im Browser.

0%
100%
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

All gradients are generated in your browser. No data is sent to any server.

Über CSS Gradient Generator

Dieser Gradient Generator bietet einen visuellen Editor zum Erstellen von linearen, radialen und konischen CSS-Farbverlaeufen mit mehreren Farbstopps. Ziehen Sie Farbstopps entlang der Leiste, waehlen Sie Farben, legen Sie Winkel fest und sehen Sie das Ergebnis in Echtzeit. Wenn der Verlauf passt, kopieren Sie den generierten CSS-Code und fuegen ihn direkt in Ihr Stylesheet ein.

Häufig gestellte Fragen

Wie erstelle ich einen CSS-Farbverlauf?
Waehlen Sie einen Verlaufstyp (linear, radial oder konisch), fuegen Sie Farbstopps hinzu, indem Sie auf die Verlaufsleiste klicken, passen Sie Farben und Positionen an und kopieren Sie den generierten CSS-Code. Die Vorschau wird in Echtzeit aktualisiert.
Welche Verlaufstypen werden unterstuetzt?
Lineare Verlaeufe (mit einstellbarem Winkel), radiale Verlaeufe (Kreis oder Ellipse) und konische Verlaeufe (Farbkreis-Effekt). Jeder Typ erzeugt gueltigen CSS-Code.
Kann ich mehr als zwei Farben verwenden?
Ja. Sie koennen bis zu 10 Farbstopps hinzufuegen. Klicken Sie auf die Verlaufsleiste, um einen neuen Stopp hinzuzufuegen, oder verwenden Sie die '+'-Schaltflaeche. Ziehen Sie Stopps, um ihre Positionen anzupassen.
Wie verwende ich den generierten CSS-Code?
Klicken Sie auf 'CSS kopieren', um den Verlaufscode zu kopieren. Fuegen Sie ihn als Background-Eigenschaft in Ihr CSS ein, z.B.: background: linear-gradient(90deg, #ff0000, #0000ff);

Ähnliche Werkzeuge

Hex to RGB Converter

Convert hex color codes to RGB, HSL, and more

Image Color Picker

Upload an image and click to extract color codes

RGB to HSL Converter

Convert RGB color values to HSL format

Color Contrast Checker

Check WCAG color contrast ratios for accessibility compliance

Analogous Color Finder

Find analogous colors for any hex code. Generate harmonious color palettes using adjacent hues on the color wheel.

Triadic Color Generator

Generate triadic color schemes from any hex code. Three colors evenly spaced at 120° on the color wheel.

Color Mixer

Mix two colors together at any ratio. See the blended result with hex, RGB, and HSL values plus a full gradient preview.