Gradienten-Generator - Visueller CSS-Gradienten-Editor
Entwerfen Sie lineare und radiale Gradienten visuell. Fügen Sie Farbstopps hinzu, passen Sie Winkel an, sehen Sie eine Live-Vorschau und kopieren Sie CSS. kostenlos.
프리셋
Was ist ein Gradienten-Generator?
Ein Gradienten-Generator ist ein visueller Editor zum Erstellen von CSS-Gradienten. Anstatt Gradienten-Code manuell zu schreiben, wählen Sie Farben aus, legen Positionen fest und passen Winkel an – das Tool generiert das CSS in Echtzeit. Er unterstützt sowohl lineare Gradienten (mit Winkelsteuerung) als auch radiale Gradienten (mit Mittelpunktsteuerung), wodurch es einfach ist, sanfte Farbübergänge für Hintergründe, Schaltflächen und UI-Elemente zu erstellen.
So erstellen Sie einen CSS-Gradienten
- Typ wählen – Wählen Sie Linearer oder Radialer Gradient
- Richtung festlegen – Passen Sie den Winkel (linear) oder den Mittelpunkt (radial) an
- Farbstopps bearbeiten – Ändern Sie Farben und ziehen Sie Positionsschieberegler
- Weitere Stopps hinzufügen – Klicken Sie auf „+ Stopp hinzufügen“ für komplexe Gradienten (bis zu 8)
- CSS kopieren – Klicken Sie auf die Schaltfläche „Kopieren“, um den CSS-Code zu erhalten
Warum diesen Gradienten-Generator verwenden?
- Visueller Editor – Sehen Sie, wie sich Ihr Gradient in Echtzeit aktualisiert, während Sie ihn anpassen
- Linear & Radial – Beide Gradiententypen mit voller Kontrolle
- Mehrere Stopps – Fügen Sie bis zu 8 Farbstopps für komplexe Gradienten hinzu
- Voreinstellungen – 8 schöne voreingestellte Gradienten als Ausgangspunkt
- One-Click CSS – Kopieren Sie sofort produktionsbereiten CSS-Code
FreeToolbox vs. andere Gradienten-Tools
| Funktion | FreeToolbox | cssgradient.io | WebGradients |
|---|---|---|---|
| Live-Vorschau | Ja | Ja | Nur statisch |
| Farbstopps | Bis zu 8 | Unbegrenzt | 2 (fest) |
| Radiale Unterstützung | Ja | Ja | Nein |
| Voreinstellungen | 8 | Keine | 180 |
| Werbung | Minimal | Moderat | Minimal |
Häufige Fragen
Was ist der Unterschied zwischen linearen und radialen Gradienten?
Lineare Gradienten gehen entlang einer geraden Linie in einem bestimmten Winkel über. Radiale Gradienten gehen von einem Mittelpunkt in einer kreisförmigen oder elliptischen Form nach außen über.
Wie viele Farbstopps kann ich hinzufügen?
Bis zu 8 Farbstopps. Sie benötigen mindestens 2 Stopps, um einen Gradienten zu bilden. Klicken Sie auf '+ Stopp hinzufügen', um weitere hinzuzufügen.
Kann ich einen Farbstopp entfernen?
Ja. Klicken Sie auf die Schaltfläche × neben einem beliebigen Stopp, um ihn zu entfernen, solange mindestens 2 Stopps verbleiben.
Wie verwende ich die Voreinstellungen?
Klicken Sie auf eine beliebige Miniaturansicht der Voreinstellungen unten. Dadurch werden die voreingestellten Farben geladen und der Gradiententyp auf linear bei 135° eingestellt. Sie können ihn dann weiter anpassen.
Generiert dies Cross-Browser-CSS?
Das generierte CSS verwendet die Standard-Gradienten-Syntax, die von allen modernen Browsern (Chrome, Firefox, Safari, Edge) unterstützt wird. Es sind keine Herstellerpräfixe erforderlich.