Developer Tools
Web Utilities
Image ToolsFarbverlauf-Generator
Erstellen Sie visuell wunderschöne CSS-Farbverläufe. Generieren Sie lineare, radiale und konische Verläufe mit mehreren Farbstopps. CSS-Code zum Kopieren bereit.
Verlaufseinstellungen
Vorschau & CSS-Code
.gradient-element {
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}linear-gradient(90deg, #667eea 0%, #764ba2 100%)Verwandte Tools
Über den CSS Farbverlauf-Generator
So Funktioniert Es
- Wählen Sie zwischen linearen, radialen oder konischen Verlaufstypen
- Fügen Sie mehrere Farbstopps hinzu und positionieren Sie sie präzise
- Passen Sie Verlaufswinkel, Formen und Richtungen an
- Verläufe in Echtzeit in der Vorschau sehen
- CSS-Code fertig zur Verwendung in Projekten kopieren
- Aus schönen voreingestellten Verläufen auswählen
Häufige Anwendungsfälle
- Beeindruckende Hintergrundverläufe für Webseiten erstellen
- Auffällige Hintergründe für Schaltflächen und Karten entwerfen
- Moderne UI-Elemente mit Verlaufsüberlagerungen erstellen
- Farbübergänge für Hero-Bereiche generieren
- Mit Farbkombinationen für Branding experimentieren
- CSS-Verlaufssyntax und -eigenschaften erlernen
Häufig Gestellte Fragen
Welche Arten von CSS-Farbverläufen kann ich mit diesem Tool erstellen?
Das Tool unterstützt alle drei CSS-Verlaufstypen: Lineare (geradlinige Farbübergänge), Radiale (kreisförmige oder elliptische Übergänge von einem Mittelpunkt) und Konische (um einen Mittelpunkt rotierende Übergänge). Jeder Typ hat anpassbare Einstellungen für Richtung, Form und Farbstopps.
Wie füge ich meinem Verlauf mehrere Farben hinzu?
Klicken Sie auf '+ Stopp hinzufügen', um weitere Farbstopps hinzuzufügen. Jeder Stopp kann mit einer bestimmten Farbe (über den Farbwähler oder Hex-Eingabe) und Position (0-100%) angepasst werden.
Wie steuere ich die Richtung eines linearen Verlaufs?
Für lineare Verläufe verwenden Sie den Winkelschieberegler, um die Richtung von 0 bis 360 Grad einzustellen. 0° erstellt einen Verlauf von unten nach oben, 90° von links nach rechts, 180° von oben nach unten, 270° von rechts nach links.
Was ist der Unterschied zwischen Kreis und Ellipse bei radialen Verläufen?
Bei radialen Verläufen erstellt 'Kreis' einen perfekt kreisförmigen Verlauf, während 'Ellipse' einen ovalen Verlauf erstellt, der dem Seitenverhältnis des Elements entspricht.
Kann ich radiale Verläufe in verschiedenen Bereichen positionieren?
Ja! Radiale Verläufe können in der Mitte, oben, unten, links, rechts oder in jeder Ecke positioniert werden. Dies steuert, wo der Verlauf innerhalb des Elements beginnt.
Wie verwende ich die voreingestellten Verläufe?
Das Tool enthält 20 schöne voreingestellte Verläufe wie Sonnenuntergang, Ozean, Wald, Süßigkeit, Feuer, Lila, Aurora und mehr. Klicken Sie einfach auf eine Voreinstellungs-Schaltfläche, um sie sofort anzuwenden.
Wie kopiere ich den CSS-Code meines Verlaufs?
Es gibt zwei Kopieroptionen: 'CSS kopieren' liefert die vollständige CSS-Regel einschließlich Selektor, und 'Wert kopieren' liefert nur den Verlauwert zur Verwendung in jeder CSS-Eigenschaft.
Wie viele Farbstopps sind mindestens erforderlich?
Ein Verlauf benötigt mindestens 2 Farbstopps. Das Tool erzwingt dieses Minimum und erlaubt das Entfernen von Stopps nicht, wenn nur noch zwei übrig sind.
Kann ich diese Verläufe nur für Hintergründe verwenden?
Obwohl Verläufe häufig für Hintergründe verwendet werden, können sie auf viele CSS-Eigenschaften angewendet werden, einschließlich background-image, border-image und mask-image.
Wie funktionieren konische Verläufe?
Konische Verläufe wechseln Farben in einer kreisförmigen Rotation um einen Mittelpunkt, ähnlich einem Farbrad. Die Winkeleinstellung steuert, wo der Verlauf beginnt.
Sind die generierten Verläufe mit allen Browsern kompatibel?
Ja, CSS-Verläufe werden in allen modernen Browsern einschließlich Chrome, Firefox, Safari, Edge und mobilen Browsern gut unterstützt.
Kann ich Farbstopps nach dem Hinzufügen bearbeiten?
Absolut! Jeder Farbstopp kann jederzeit bearbeitet werden. Änderungen werden sofort in der Vorschau angezeigt.