Zufällige Farbverläufe erstellen
Erstelle zufällige lineare CSS-Farbverläufe mit zwei oder drei Farben, bearbeite HEX-Werte und kopiere oder lade das CSS herunter.
Das könnte dir auch helfen: Website-Farbpalette als Vorschau , Lesbare Textfarben finden , Generator für 5-Farben-Paletten und weitere
Wähle eine ganze Zahl von 0° bis 360°. Bei 0° zeigt der Verlauf nach oben, bei 90° nach rechts.
Erstelle neue Farben mit dem gewählten Winkel. Änderungen an Farben und Winkel aktualisieren Vorschau und CSS sofort.
Farbverlauf-Vorschau
CSS-Code für den Hintergrund
.gradient {
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
}So erstellst du einen zufälligen CSS-Farbverlauf
- Wähle zwei oder drei Farbstopps und einen Winkel von 0° bis 360°.
- Erstelle zufällige Farben, nutze die Farbauswahl oder gib eigene 3- oder 6-stellige HEX-Werte ein.
- Prüfe den Hintergrund in der Vorschau und kopiere das CSS oder lade random-gradient.css herunter. Weise einem HTML-Element die Klasse gradient zu.
Ideen für Website-Hintergründe
- Erstelle einen blauen und violetten Hintergrund mit zwei Farben für den Einstiegsbereich einer Landingpage.
- Probiere drei Farben für eine Präsentationskarte, eine Dashboard-Kopfzeile oder einen Portfoliobereich.
- Behalte deine Markenfarben und ändere den Winkel, um die Verlaufsrichtungen zu vergleichen.
Häufige Fragen
Kann ich einen zufällig erstellten Verlauf bearbeiten?
Ja. Ändere jede HEX-Farbe im Textfeld oder über die Farbauswahl und passe anschließend den Winkel an. Vorschau und CSS verwenden dieselben Einstellungen.
Welche Farbformate und Verlaufstypen werden unterstützt?
Dieses Tool erstellt deckende lineare CSS-Farbverläufe mit zwei oder drei gleichmäßig verteilten Farbstopps. Es akzeptiert 3- und 6-stellige HEX-Farben. Alphakanäle, radiale Verläufe und eigene Stopp-Positionen werden nicht unterstützt.
Was passiert bei einer ungültigen HEX-Farbe oder einem ungültigen Winkel?
Eine Fehlermeldung erscheint, die bisherige Vorschau und das CSS werden geleert. Kopieren und Herunterladen bleiben deaktiviert, bis alle Einstellungen gültig sind.
Kann ich das CSS auf meiner Website verwenden?
Ja. Kopiere die Regel .gradient in dein Stylesheet und ergänze class="gradient" am gewünschten Element. Die heruntergeladene Datei enthält dieselbe Regel wie die Vorschau.
Farben werden in deinem Browser erstellt und bearbeitet. Das Tool sendet deine HEX-Werte und das erstellte CSS nicht an den Server. Übliche Website-Werbung und Analysedienste können weiterhin geladen werden.
Ist dieses Tool hilfreich? Teile es mit deinem Team und beschleunige eure Arbeit.
Gefällt es dir, tippe auf . Braucht es Verbesserungen, tippe auf , damit wir Updates priorisieren können.