Tool Hub

Farbverlauf-Generator

CSS linear / radial / konisch Farbverläufe mit Farbstopps, Vorschau und kopierbarem Code

CSS-Farbverläufe (linear, radial, konisch) mit benutzerdefinierten Farbstopps und Winkeln erstellen. Die Live-Vorschau aktualisiert sich beim Anpassen jedes Stopps; das generierte CSS kann direkt in das Stylesheet kopiert werden.

Farbstopps

Vordefinierte Galerie

Vorschau

CSS
background: linear-gradient(90deg, #7c3aed 0%, #3b82f6 100%);

Wie man es benutzt

  1. Choose the gradient type: linear, radial, or conic.
  2. Add color stops and drag them to set each color's position; for linear and conic, set the angle in degrees.
  3. The preview pane updates live as you edit.
  4. Copy the generated CSS background value straight into your stylesheet.

Beispiele

  • Two stops at #ff7e5f (0%) and #feb47b (100%) on a 90deg linear gradient produce the CSS background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%).
  • Switching to radial type with the same stops creates a soft glow from the center outward, shown live in the preview.

Ergebnisse vor dem Produktiveinsatz prüfen. Keine Gewährleistung — siehe Nutzungsbedingungen.