Die Kurzfassung
- Ein radialer CSS-Farbverlauf verteilt Farbe von einem Mittelpunkt nach außen und wird mit der Funktion radial-gradient() überall geschrieben, wo CSS ein Bild akzeptiert.
- Standardmäßig ist ein radialer Farbverlauf eine Ellipse, die in der Box zentriert ist und bis zur am weitesten entfernten Ecke reicht.
- Die Größen-Schlüsselwörter closest-side, closest-corner, farthest-side und farthest-corner bestimmen, wo der letzte Farbstopp landet.
- Das Schlüsselwort at verschiebt den Mittelpunkt, zum Beispiel at 20% 30%, und Positionen funktionieren wie bei background-position.
- Mehrere radiale Farbverläufe, die zu transparent auslaufen, übereinanderzulegen, ist der Standardweg für weiche Glows und Mesh-artige Hintergründe in CSS.
Auf dieser Seite
Ein radialer CSS-Farbverlauf blendet Farbe von einem Punkt nach außen, wie Licht, das sich von einer Lampe ausbreitet. Du schreibst ihn mit radial-gradient() und nutzt ihn überall, wo CSS ein Bild erwartet, meist bei background-image. Ohne Optionen zeichnet er eine Ellipse in der Mitte der Box, die bis zur am weitesten entfernten Ecke reicht: radial-gradient(#fef3c7, #b45309) ergibt eine helle Mitte, die zu tiefem Bernstein ausstrahlt.
radial-gradient(#fef3c7, #f59e0b 45%, #78350f)Alles andere in der Funktion ändert eine von drei Dingen: die Form, die Größe und die Position. Sobald du diese beherrschst, zeichnet dieselbe Funktion Glows, Spotlights, Vignetten, Sonnenstrahlen und die Farbflecken hinter einem Mesh-Farbverlauf in CSS. Zur gestalterischen Seite radialer Übergänge siehe den Begleitartikel zu radialen Farbverläufen.
Die Syntax von radial-gradient()
/* shape size position stops */
radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 60%, #1c1917)
/* everything before the first comma is optional */
radial-gradient(#fde047, #ea580c)| Teil | Werte | Standard |
|---|---|---|
| Form | circle oder ellipse | ellipse |
| Größe | ein Schlüsselwort, eine Länge für einen Kreis oder zwei Längen oder Prozentwerte für eine Ellipse | farthest-corner |
| Position | at gefolgt von allem, was background-position akzeptiert | at center |
| Interpolation | in oklab, in oklch und andere Farbräume | sRGB bei Hex-Farben |
| Farbstopps | zwei oder mehr Farben mit optionalen Positionen | erforderlich |
Eine Regel überrascht viele: Die Größe eines Kreises muss eine Länge wie 200px sein, nie ein Prozentwert, weil ein Prozentwert eines Rechtecks keinen einzelnen Radius hat. Ellipsen akzeptieren Prozentwerte, etwa ellipse 60% 40%. Die MDN-Referenz zu radial-gradient() listet die vollständige Grammatik auf.
Kreis oder Ellipse
Eine Ellipse dehnt sich mit der Box: Auf einem breiten Banner ist der Glow breit, auf einer hohen Story ist er hoch. Ein Kreis bleibt rund, egal was die Box tut. Nutze Ellipsen für Hintergründe, die ihren Container gleichmäßig füllen sollen, und Kreise für alles, was als Lichtquelle, Planet oder Button-Glow lesbar sein soll.
Größen-Schlüsselwörter: closest-side bis farthest-corner
Die Größe bestimmt, wo der letzte Farbstopp landet, also wo die Endform des Farbverlaufs sitzt. Die vier Schlüsselwörter messen vom Mittelpunkt zur nächsten oder am weitesten entfernten Seite oder Ecke der Box. Sie sehen nur verschieden aus, wenn der Mittelpunkt nicht mittig liegt, deshalb beginnen alle Beispiele unten bei 30% 40%.
In der Praxis passt closest-side zu abgeschlossenen Formen wie Punkten und Badges, weil die Farbe nie über den nächsten Rand hinausläuft. farthest-corner passt zu Hintergründen, weil der Übergang die ganze Box abdeckt. Brauchst du genaue Kontrolle, gib eine Länge an: circle 180px at 50% 0 ist ein 180 Pixel großer Glow, der vom oberen Rand hängt.
Positionieren mit at
Das Schlüsselwort at setzt den Mittelpunkt mit denselben Werten wie background-position: Schlüsselwörter wie at top right, Prozentwerte wie at 20% 80% oder Längen wie at 40px 60px. Der Mittelpunkt kann sogar außerhalb der Box liegen, etwa bei at 50% 120%, was einen Horizont-Glow ergibt, der unter dem unteren Rand aufsteigt.
Geschichtete radiale Glows
Das nützlichste radiale Muster sind mehrere Farbverläufe in einem background-image, jeder mit Auslauf zu transparent, über einer einfarbigen dunklen Farbe. Jede Ebene ist ein Lichtfleck an seinem eigenen Platz. Da die erste Ebene zuoberst gemalt wird, setze den hellsten, kleinsten Glow an den Anfang.
.glow {
background-color: #0b0a1a;
background-image:
radial-gradient(circle at 20% 25%, rgb(124 58 237 / 0.55), transparent 45%),
radial-gradient(circle at 80% 30%, rgb(236 72 153 / 0.45), transparent 40%),
radial-gradient(ellipse at 50% 110%, rgb(56 189 248 / 0.4), transparent 60%);
}Zwei weitere Muster decken die meisten übrigen Aufgaben ab. Eine Vignette dunkelt die Ränder ab: radial-gradient(ellipse, transparent 55%, rgb(0 0 0 / 0.55)), über ein Foto gelegt. Ein Spotlight folgt dem Zeiger, wenn du seine Position aus benutzerdefinierten Eigenschaften speist, etwa radial-gradient(circle 240px at var(--x) var(--y), rgb(255 255 255 / 0.15), transparent), wobei ein paar Zeilen JavaScript --x und --y bei pointermove setzen.
Sich wiederholende radiale Farbverläufe
repeating-radial-gradient() wiederholt seine Stopps nach außen, bis die Box voll ist, sodass ein Paar harter Stopps zu Ringen wird. Nutze Längen für die Stopp-Positionen, damit die Ringbreite konstant bleibt. Das ist die Grundlage für Wellen-, Zielscheiben- und Halbton-artige Texturen, und der Artikel zu CSS-Mustern hat mehr dazu.
Vermeide
- Prozentwerte für die Größe eines Kreises, die ungültig sind
- Helle Glows, die hart enden, weil der letzte Stopp deckend ist
- Jeden Glow bei 50% 50% zentrieren
- Fünf überlappende Glows gleicher Stärke
Besser
- Längen für Kreise, Prozentwerte für Ellipsen
- Jeden Glow zu
transparentauslaufen lassen - Glows außermittig platzieren, nahe Ecken oder unter dem Rand
- Ein dominanter Glow und ein bis zwei ruhigere
Häufige Fragen
Wie mache ich einen Kreis-Farbverlauf in CSS?
Nutze radial-gradient(circle, farbe1, farbe2). Mit circle bleibt die Form rund, ohne bekommst du eine Ellipse, die sich mit der Box dehnt.
Wie verschiebe ich den Mittelpunkt eines radialen Farbverlaufs?
Füge nach Form und Größe at und eine Position hinzu, zum Beispiel radial-gradient(circle at 20% 30%, #c4b5fd, #1e1b4b). Positionen funktionieren wie bei background-position.
Was bedeutet farthest-corner?
Es bemisst den Farbverlauf so, dass sein letzter Farbstopp die vom Mittelpunkt am weitesten entfernte Ecke der Box erreicht. Es ist die Standardgröße.
Kann ein radialer Kreis-Farbverlauf eine Prozentgröße haben?
Nein. Ein Kreis braucht eine einzelne Länge wie 200px. Ellipsen können zwei Prozentwerte nutzen, etwa ellipse 60% 40%.
Wie mache ich einen Glow-Effekt mit CSS-Farbverläufen?
Lege einen oder mehrere radial-gradient()-Werte übereinander, die von einer halbtransparenten Farbe zu transparent auslaufen, über einer dunklen background-color.
Geschrieben von Gradiently
Das Team hinter Gradiently, einem Designtool rund um Marks: lebendige Farbverläufe, durch die alles, was du gestaltest, nach dir aussieht.
Unser Profil ansehen
