CSS-Farbverlauf-Generator
Bau einen Farbverlauf nach Augenmaß und kopiere das CSS.
Zieh einen Griff, um einen Stopp zu verschieben, oder klick auf die Leiste, um einen hinzuzufügen. Griffe lassen sich auch mit den Pfeiltasten bewegen.
Farbstopps
- %
- %
- %
Läuft in deinem Browser. Nichts, was du eingibst, wird irgendwohin gesendet.
- Stopps per Ziehen setzen
- Linear, radial und konisch
- 8 fertige Vorlagen
So machst du einen CSS-Farbverlauf
- Wähle eine Vorlage, oder stell die Farbe jedes Stopps ein.
- Zieh die Griffe auf der Leiste, und klick auf die Leiste, um einen Stopp hinzuzufügen.
- Kopiere das CSS und füg es in dein Stylesheet ein.
Verlaufstypen im Vergleich
| Typ | Wie er sich ausbreitet | CSS-Funktion |
|---|---|---|
| Linear | Entlang einer geraden Linie in einem Winkel | linear-gradient() |
| Radial | Von einem Mittelpunkt nach außen | radial-gradient() |
| Konisch | Um einen Mittelpunkt, wie ein Farbrad | conic-gradient() |
Browserunterstützung nach Verlaufstyp
| Verlaufstyp | Braucht mindestens |
|---|---|
| Linear und radial | Jeden aktuellen Browser, bis zurück zu IE10 mit Präfix |
| Konisch | Chrome 69, Firefox 83, Safari 12.1 |
Das CSS dieser Seite beginnt immer zuerst mit einer einfachen background-color-Zeile, damit ein Browser, der den Verlauf nicht zeichnen kann, trotzdem die Farbe des ersten Stopps zeigt statt einer leeren Box.
Tipps für weichere Verläufe
- Füg in der Mitte einen dritten Stopp hinzu, damit der Verlauf wie zwei Farben wirkt, die durch eine dritte verschmelzen, statt eines flachen zweifarbigen Übergangs.
- Für eine harte Kante statt eines weichen Übergangs, gib zwei benachbarten Stopps dieselbe Position.
- 0deg läuft von unten nach oben und 90deg von links nach rechts. Addiere 180 zu jedem Winkel, um die Richtung eines Verlaufs umzukehren, ohne jeden Stopp neu einzutippen.
- Passe die radiale Form an die Box an: Kreis für quadratische Elemente, Ellipse für breite, damit der Verlauf nicht gestreckt wirkt.
Häufige Fragen zu CSS-Farbverlauf-Generator
Wie mache ich einen Farbverlauf in CSS?
Setz die Eigenschaft background auf eine Verlaufsfunktion, wie background: linear-gradient(90deg, #ff7e5f, #feb47b). Der erste Wert ist die Richtung, danach kommen die Farben, jede mit optionaler Position.
Was ist der Unterschied zwischen linearen, radialen und konischen Verläufen?
Ein linearer Verlauf ändert die Farbe entlang einer geraden Linie, ein radialer Verlauf breitet sich von einem Mittelpunkt aus, und ein konischer Verlauf schwenkt um einen Mittelpunkt wie ein Farbrad oder ein Tortendiagramm.
In welche Richtung zeigt der Winkel?
0deg läuft von unten nach oben, 90deg von links nach rechts, 180deg von oben nach unten und 270deg von rechts nach links. Bei konischen Verläufen legt der Winkel fest, wo der Schwenk beginnt.
Wie bekomme ich eine harte Kante zwischen zwei Farben?
Gib zwei benachbarten Stopps dieselbe Position, wie Rot 50% und Blau 50%. Die Farbe wechselt dann an diesem Punkt, statt zu verlaufen.
Funktionieren CSS-Farbverläufe in jedem Browser?
Lineare und radiale Verläufe funktionieren in jedem aktuellen Browser. Konische Verläufe brauchen Chrome 69, Firefox 83 oder Safari 12.1 und neuer. Das CSS hier beginnt mit einer einfarbigen Zeile als Fallback.
Kann ich einen CSS-Farbverlauf animieren?
Du kannst background-position oder background-size auf einem überdimensionierten Verlauf animieren, für einen Bewegungseffekt. Die Stopp-Farben selbst zu animieren braucht die CSS-Regel @property oder ein kleines Skript, da Browser nicht von selbst zwischen zwei vollständigen Verlaufswerten überblenden können.
Kann ein Verlauf als Textfarbe genutzt werden?
Ja. Kopiere das Verlaufs-CSS hier in einen Hintergrund, füg dann background-clip: text und color: transparent zum Textelement hinzu, damit der Verlauf durch die Buchstaben scheint, statt eine Box zu füllen.