CSS-Gradient-Generator
색상 정지점
0%
100%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); Zuletzt aktualisiert: 2026 · Kostenloses Online-Tool
Was ist CSS-Gradient-Generator?
Kostenloser visueller CSS-Gradient-Generator: Erstellen Sie lineare, radiale und konische Farbverläufe, passen Sie Farbstopps und Winkel an und kopieren Sie den fertigen CSS-Code.
Anleitung
- 1 Typ auswählen — Wählen Sie den Farbverlaufstyp (linear, radial, konisch).
- 2 Farbstopps anpassen — Passen Sie Farbe und Position jedes Farbstopps an.
- 3 Vorschau — Überprüfen Sie das Ergebnis in Echtzeit in der Vorschau.
- 4 CSS-Code kopieren — Kopieren Sie den CSS-Code mit der Schaltfläche 'Kopieren' in die Zwischenablage.
Verwandte Tools
CSS-Box-Shadow-Generator Kostenloser Online-CSS-box-shadow-Generator mit Reglern für Versatz, Weichzeichnung, Streuung, Farbe und Inset, der eine Live-Vorschau des Schattens bietet und kopierfertigen box-shadow-CSS-Code erzeugt.
CSS-Border-Radius-Generator Kostenloser Online-CSS-border-radius-Generator mit acht unabhängigen Ecken-Handles und Schiebereglern, der eine Live-Vorschau der abgerundeten Form zeigt und kopierfertigen border-radius-CSS-Code erzeugt.
Farbcode-Konverter Kostenloser Online-Farbkonverter, der sofort zwischen HEX-, RGB-, HSL- und OKLCH-Codes umrechnet und das WCAG-Kontrastverhältnis zweier Farben berechnet, um die Barrierefreiheit leicht zu prüfen.
Häufig gestellte Fragen
Es gibt keine Begrenzung, aber 2–6 sind üblich. Zu viele können die Leistung beeinträchtigen.
Ja. Aktivieren Sie das Kontrollkästchen 'Wiederholen', um das repeating-Präfix hinzuzufügen.
Fünf Vorlagen werden angeboten: Sunset, Ocean, Forest, Midnight und Rainbow.
Derzeit wird nur reines CSS ausgegeben. Eine Tailwind-Konvertierung ist für ein zukünftiges Update geplant.
Nein. Die gesamte Verarbeitung erfolgt im Browser.