Kostenloses Tool

CSS Gradient Generator

Erstellen Sie linear, radial und konisch CSS-Gradienten visuell. Ziehen Sie Farbstoffe, passen Sie Winkel und Position an, und kopieren Sie das fertige CSS.

CSS
background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
Typ
Winkel135°
Farbstoffe
0%
100%
Voreinstellungen

Gradientypen

Lineare Gradienten gehen entlang einer geraden Linie in jedem Winkel über. Radiale Gradienten strahlen von einem Mittelpunkt aus. Konische Gradienten schwingen um einen Mittelpunkt herum – nützlich für Kreisdiagramme und Farbräder.

Anleitung zur Verwendung

  1. Wählen Sie einen Gradientyp (linear, radial oder konisch).
  2. Fügen Sie Farbstoffe hinzu oder ziehen Sie diese, um die Farben zu definieren.
  3. Kopieren Sie die CSS-Ausgabe direkt in Ihr Stylesheet.

Alle Verarbeitungen erfolgen in Ihrem Browser – nichts wird an einen Server gesendet.

Aus dem Skybin-Blog

Free developer tools from Skybin

Anleitung auf Skybin lesen

Häufig gestellte Fragen

Ist das generierte CSS browserübergreifend kompatibel?
Ja. Die Ausgabe verwendet standardmäßige CSS-Gradient-Syntax, die von allen modernen Browsern unterstützt wird.
Kann ich einen Gradienten teilen?
Ja. Klicken Sie auf Teilen – der Gradienten-Status ist in der URL codiert, die Sie kopieren und versenden können.