CSS-Farbverlauf-Generator
Erstellen Sie lineare und radiale CSS-Farbverläufe mit frei wählbaren Farbcodes und Neigungswinkeln direkt für Ihre Webprojekte.
Tool ausführen
Mit diesem Generator erstellen Sie schnell passenden CSS-Code für zweifarbige Farbverläufe. Sie legen zwei Farbangaben fest und bestimmen, ob der Verlauf linear oder kreisförmig kreiert wird. Bei linearen Verläufen steuern Sie die Richtung flexibel über einen Winkelwert in Grad. Wenn Sie keine Eingaben ändern, nutzt das Tool voreingestellte Standardwerte mit den Farben #ff6b6b und #4ecdc4 bei einem Winkel von 45 Grad. Der Generator übernimmt Ihre Farbwerte direkt in den erzeugten CSS-Text. Sie können gängige Hexadezimalwerte, RGB- oder HSL-Notationen und benannte Webfarben einsetzen. Bei der Eingabe des Winkels rechnet das Werkzeug Werte automatisch im Bereich von 0 bis 359 Grad um. Sollte eine Winkeleingabe ungültig sein, greift automatisch der Standardwert von 45 Grad. Wählen Sie die kreisförmige Variante, wird ein zentrierter Verlauf generiert, bei dem der Winkelwert entfällt. Das fertige CSS-Snippet kopieren Sie anschließend direkt in Ihr Stylesheet für Hintergründe, Schaltflächen oder moderne Weboberflächen.
Anleitung
- Wählen Sie die erste Farbe für den Startpunkt des Verlaufs aus oder tragen Sie einen Farbcode ein.
- Geben Sie die zweite Farbe für den Endpunkt des Verlaufs an.
- Stellen Sie den gewünschten Verlaufstyp ein: linear für gerichtete Verläufe oder radial für kreisförmige Verläufe.
- Geben Sie bei linearen Verläufen den gewünschten Neigungswinkel in Grad an.
- Starten Sie die Generierung und kopieren Sie die erzeugte CSS-Regel in Ihren Webcode.
Beispiele
- Linearer Verlauf mit 90 Grad: Aus Farbe 1 #1e3c72 und Farbe 2 #2a5298 bei einem Winkel von 90 entsteht die CSS-Anweisung linear-gradient(90deg, #1e3c72, #2a5298).
- Kreisförmiger Farbverlauf: Mit Farbe 1 #ff9a9e und Farbe 2 #fecfef sowie dem Typ radial erzeugt das Tool radial-gradient(circle, #ff9a9e, #fecfef).
FAQ
Welche Farbformate werden unterstützt?
Sie können gängige CSS-Farbformate wie Hexadezimal-Codes, RGB, HSL oder benannte Farben eingeben. Die Werte werden unverändert in den CSS-Code übertragen.
Was passiert bei Winkeln über 360 Grad?
Winkelwerte werden automatisch auf den Standardbereich zwischen 0 und 359 Grad umgerechnet.
Benötigt ein kreisförmiger Verlauf eine Winkelangabe?
Nein, bei radialen Verläufen wird der Winkelwert nicht verwendet und ein kreisförmiger Verlauf zentriert aufgebaut.
Was geschieht, wenn ein Eingabefeld leer bleibt?
Bleiben Felder frei, verwendet das Tool Standardwerte: #ff6b6b als erste Farbe, #4ecdc4 als zweite Farbe, 45 Grad als Winkel und linear als Verlaufstyp.