Kostenloses Tool
CSS Gradient Generator
Erstellen Sie linear, radial und kegelförmige CSS-Gradienten visuell. Ziehen Sie Farbstopps, passen Sie Winkel und Position an, und kopieren Sie das einsatzbereite CSS.
CSS
background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);Typ
Winkel135°
Farbstopps
0%
100%
Voreinstellungen
Gradiententypen
Lineare Gradienten verlaufen in einer geraden Linie in beliebigem Winkel. Radiale Gradienten strahlen von einem Mittelpunkt aus. Kegelförmige Gradienten verlaufen um einen Mittelpunkt herum — nützlich für Kreisdiagramme und Farbräder.
So verwenden Sie es
- Wählen Sie einen Gradiententyp (linear, radial oder kegelförmig).
- Fügen Sie Farbstopps hinzu oder ziehen Sie sie, um die Farben zu definieren.
- Kopieren Sie die CSS-Ausgabe direkt in Ihr Stylesheet.
Alle Verarbeitungen erfolgen in Ihrem Browser — nichts wird an einen Server übertragen.
Häufig gestellte Fragen
- Ist das generierte CSS browserübergreifend kompatibel?
- Ja. Die Ausgabe verwendet die Standard-CSS-Gradientensyntax, die von allen modernen Browsern unterstützt wird.
- Kann ich einen Gradienten teilen?
- Ja. Klicken Sie auf Teilen — der Gradientenzustand wird in der URL codiert, die Sie kopieren und senden können.