CSS-Farbverlauf-Generator
Schöne Farbverläufe für Ihre Website-Hintergründe und UI-Elemente gestalten.
Farben, Winkel und Positionen visuell bearbeiten, dann CSS-Code sofort kopieren. 100% Kostenlos — Keine Registrierung erforderlich.
background: linear-gradient(90deg, #3B82F6 0%, #9333EA 100%); Häufige Anwendungsfälle
Wo und wie CSS-Farbverläufe in Ihren Projekten verwenden
Hero-Hintergründe
Auffällige Hero-Sections mit sanften Farbübergängen erstellen. Farbverläufe fügen Tiefe und visuelles Interesse zu Landing-Pages hinzu.
Button-Effekte
Buttons mit Farbverlauf-Hintergründen und Hover-Effekten hervorheben. Premium, modern aussehende CTAs erstellen.
Text-Farbverläufe
Farbverläufe auf Text für atemberaubende Typografie-Effekte anwenden. Perfekt für Überschriften, Logos und Akzenttext.
Karten-Overlays
Farbverlauf-Overlays zu Bildern und Karten für bessere Textlesbarkeit und visuelle Tiefe hinzufügen.
Wie CSS-Farbverläufe funktionieren
CSS-Farbverläufe erlauben sanfte Übergänge zwischen zwei oder mehr Farben anzuzeigen. Im Gegensatz zu Bildern werden Farbverläufe vom Browser generiert und skalieren perfekt bei jeder Auflösung.
Arten von Farbverläufen
- Linearer Farbverlauf: Farben gehen entlang einer geraden Linie über. Die Richtung kontrollieren Sie mit einem Winkel oder Schlüsselwörtern.
- Radialer Farbverlauf: Farben strahlen von einem zentralen Punkt nach außen. Sie können kreisförmige oder elliptische Formen erstellen.
- Konischer Farbverlauf: Farben rotieren um einen Mittelpunkt (wie ein Farbrad). Ideal für Kreisdiagramme und Winkeleffekte.
Farbstopps
Jede Farbe in einem Farbverlauf wird 'Farbstopp' genannt. Sie können angeben, wo jede Farbe erscheinen soll als Prozent (0% bis 100%) oder feste Länge.
CSS-Farbverlauf-Syntax & Beispiele
Kopierfertige Code-Beispiele für verschiedene Farbverlauf-Typen
/* Basic horizontal gradient */
.element {
background: linear-gradient(90deg, #3B82F6, #9333EA);
}
/* Diagonal gradient */
.element {
background: linear-gradient(45deg, #ff6b6b, #feca57);
}
/* Multiple color stops */
.rainbow {
background: linear-gradient(
90deg,
#ff0000 0%,
#ff7f00 17%,
#ffff00 33%,
#00ff00 50%,
#0000ff 67%,
#4b0082 83%,
#9400d3 100%
);
}/* Circle from center */
.element {
background: radial-gradient(circle, #3B82F6, #1E3A8A);
}
/* Ellipse at specific position */
.element {
background: radial-gradient(
ellipse at top left,
#ffecd2 0%,
#fcb69f 100%
);
}
/* Multiple layers for depth */
.glassmorphism {
background: radial-gradient(
circle at 30% 30%,
rgba(255,255,255,0.3) 0%,
transparent 70%
);
}Häufig gestellte Fragen (FAQ)
Was ist der Unterschied zwischen linearen und radialen Farbverläufen?
Lineare Farbverläufe erzeugen einen sanften Farbübergang entlang einer geraden Linie. Radiale Farbverläufe erzeugen einen Farbübergang, der von einem zentralen Punkt nach außen strahlt.
Wie erstelle ich einen diagonalen Farbverlauf?
Verwenden Sie einen Winkelwert in der linear-gradient-Funktion. Zum Beispiel erzeugt linear-gradient(45deg, #ff0000, #0000ff) einen Farbverlauf von unten-links nach oben-rechts.
Kann ich Farbverläufe auf Text anwenden?
Ja! Setzen Sie den Farbverlauf als Hintergrund, dann verwenden Sie background-clip: text und -webkit-text-fill-color: transparent, um den Farbverlauf durch den Text sichtbar zu machen.
Werden CSS-Farbverläufe in allen Browsern unterstützt?
CSS-Farbverläufe haben exzellente Browser-Unterstützung (98%+ global). Alle modernen Browser unterstützen Farbverläufe ohne Prefixes. Nur IE9 und älter benötigen Fallbacks.