CSS-Farbverlauf-Generator
Erstellen Sie lineare, radiale und konische CSS-Farbverläufe visuell. Fügen Sie Farbstopps hinzu, passen Sie Winkel an und kopieren Sie dann das fertige CSS.
Verlaufstyp
background: -webkit-linear-gradient(135deg, rgba(99, 102, 241, 1.00) 0%, rgba(236, 72, 153, 1.00) 100%); background: linear-gradient(135deg, rgba(99, 102, 241, 1.00) 0%, rgba(236, 72, 153, 1.00) 100%);
Verlaufsvorlagen
So verwenden Sie dieses Tool
- Wählen Sie einen Verlaufstyp — Linear, Radial oder Konisch — über die Schaltflächen oben im Editor.
- Passen Sie den Winkel (für lineare und konische Verläufe) oder die Mittelposition (für radiale Verläufe) an.
- Bearbeiten Sie die Farbstopps: Klicken Sie auf ein Farbfeld, um den Farbwähler zu öffnen, verschieben Sie den Positionsregler und passen Sie die Deckkraft an.
- Klicken Sie auf '+ Stopp hinzufügen', um weitere Farben einzufügen, oder auf das Mülleimer-Symbol, um einen Stopp zu entfernen.
- Klicken Sie auf 'CSS kopieren', um den generierten Code zu kopieren, 'PNG herunterladen', um den Verlauf als Bild zu speichern, oder 'URL teilen', um einen teilbaren Link zu erhalten.
Warum unser CSS-Farbverlauf-Generator verwenden?
CSS-Farbverläufe von Hand zu erstellen bedeutet, die Syntax auswendig zu lernen und Winkelwerte zu erraten. Unser visueller Editor aktualisiert sich in Echtzeit, während Sie Stopps verschieben und Farben auswählen. Die Ausgabe enthält immer sowohl die Standard- als auch die -webkit-Präfixregeln.
Häufig gestellte Fragen
Wie füge ich einem CSS-Farbverlauf Transparenz hinzu?
Verwenden Sie den Deckkraftregler neben jedem Farbstopp. Das Tool erzeugt rgba()-Werte, sodass jeder Stopp seine eigene Transparenzstufe haben kann. Ein Stopp mit 0% Deckkraft wird vollständig transparent.
Was ist ein konischer Farbverlauf?
Ein konischer Farbverlauf schwenkt Farben um einen Mittelpunkt — wie ein Farbrad — statt entlang einer geraden Linie (linear) oder von einem Mittelpunkt nach außen (radial). Er wird häufig für Kreisdiagramme und Ladespinner verwendet.
Wie verwende ich einen Farbverlauf als CSS-Hintergrund?
Kopieren Sie das generierte CSS und fügen Sie es in Ihr Stylesheet ein. Beispiel: .element { background: linear-gradient(135deg, #6366f1, #ec4899); }.
Was ist der Unterschied zwischen linearen und radialen Farbverläufen?
Ein linearer Farbverlauf wechselt Farben entlang einer geraden Linie in einem bestimmten Winkel. Ein radialer Farbverlauf strahlt von einem Mittelpunkt nach außen in einer kreisförmigen oder elliptischen Form.
Erzeugt dieses Tool browserkompatibles CSS?
Ja. Die Ausgabe enthält immer die -webkit-Präfixversion neben der Standard-CSS-Eigenschaft und gewährleistet Kompatibilität mit Safari und älteren Chromium-basierten Browsern.
Verwandte Werkzeuge
Markdown-Tabellen-Generator
Erstellen Sie Markdown-Tabellen visuell oder fügen Sie aus Excel, Google Sheets oder CSV ein. Spaltenausrichtung festlegen und GFM exportieren.
UUID-Generator
Erzeugen Sie zufällige UUIDs für Apps, Datenbanken und APIs.
Base64 Encoder / Decoder
Kodieren und dekodieren Sie Base64-Text schnell und einfach.
Cron-Ausdruck-Generator
Erstellen, testen und verstehen Sie Cron-Ausdrücke mit einem visuellen Builder und nächsten Ausführungszeiten.
Zuletzt besuchte Werkzeuge
Regex Tester
DeveloperTest and debug regular expressions with real-time match highlighting, group capture, and substitution.
Social Media Image Resizer
ImageResize and crop images to the exact size for Instagram, YouTube, X, Facebook, LinkedIn, TikTok, and Pinterest with one-click presets.
SEO Meta Analyzer
DeveloperAnalyze title tags, meta descriptions, Open Graph tags, Twitter Cards, and social previews from any public URL.