CSS-Farbverlaufs-Generator
Entwerfen Sie moderne Farbverläufe und kopieren Sie den CSS-Code direkt für Ihr Webprojekt.
CSS Output
background: linear-gradient(90deg, #4F46E5 0%, #EC4899 100%);Preview
Grundlagen von CSS-Farbverläufen
Farbverläufe erzeugen fließende Übergänge zwischen Farbtönen. In CSS werden sie als background-image behandelt, was eine vielseitige Schichtung ermöglicht.
Lineare Verläufe (Linear Gradients)
Die Syntax kombiniert eine Winkelangabe mit einer Reihe von Farbpunkten. Mit unserem visuellen Winkelregler sehen Sie das Ergebnis in Echtzeit.
Wissensdatenbank & FAQ
Häufig gestellte Fragen
Direkte Antworten und Lösungen zu häufigen Fragen, technischen Herausforderungen und Webstandards.
Warum wirken CSS-Verläufe in der Mitte manchmal grau oder matt?expand_more
Dieses Phänomen wird als 'graue Totzone' bezeichnet. Wenn CSS zwei leuchtende Farben (z. B. Blau und Gelb) im Standard-sRGB-Farbraum interpoliert, verläuft die mathematische Mitte durch ungesättigte Grautöne. Lösungen:
- Fügen Sie einen harmonischen Zwischenfarbstopp hinzu (z. B. Grün zwischen Blau und Gelb).
- Oder nutzen Sie modernes CSS Color 4 mit OKLCH:
background: linear-gradient(in oklch to right, blue, yellow);für leuchtende Helligkeitskonstanz.
Wie lässt sich ein CSS-Hintergrundverlauf bei Hover flüssig animieren?expand_more
Da Browser
background-image nicht direkt per Transition animieren können, vergrößert man die Hintergrundfläche und animiert background-position: .gradient-btn {
background: linear-gradient(135deg, #4F46E5, #EC4899);
background-size: 200% 200%;
transition: background-position 0.4s ease;
}
.gradient-btn:hover {
background-position: 100% 100%;
}Was ist der Unterschied zwischen linear-gradient und radial-gradient in CSS?expand_more
linear-gradient() erzeugt einen Farbverlauf entlang einer geraden Linie, bestimmt durch einen Winkel (z. B.
90deg) oder eine Richtungsangabe (to bottom right). radial-gradient() strahlt von einem zentralen Fokuspunkt kreisförmig oder elliptisch nach außen ab (ideal für Lichtschein- und Vignette-Effekte).Wie erstellt man einen modernen Glassmorphism-Effekt mit Verläufen?expand_more
Glassmorphism kombiniert halbtransparente RGBA-Farbverläufe mit hardwarebeschleunigter Hintergrundunschärfe:
.glass-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
}Beeinträchtigen CSS-Verläufe die Ladezeit oder den Akku auf Mobilgeräten?expand_more
Nein. Im Gegensatz zu Rastergrafiken (PNG/WebP) sind CSS-Verläufe Vektorgleichungen, die direkt auf dem Grafikchip berechnet werden. Sie benötigen keine Netzwerkbandbreite und kaum Speicher.