# CSS radialer Farbverlauf: Formen, Größen und Positionen [Canonical HTML page](https://gradiently.design/de/guide/css-radial-gradient) radial-gradient() zeichnet Farbe von einem Punkt aus nach außen. Hier findest du jeden Teil davon mit Live-Beispielen, dazu die Schichttricks hinter weichen Glows, Spotlights und Vignetten. ## The short version - 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. 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. Bernsteinglühen, alles Standard: `radial-gradient(#fef3c7, #f59e0b 45%, #78350f)` Eine Ellipse, zentriert, bis zur am weitesten entfernten Ecke. So sieht es aus, wenn du nur Farben angibst. 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](https://gradiently.design/de/guide/css-mesh-gradient). Zur gestalterischen Seite radialer Übergänge siehe den Begleitartikel zu [radialen Farbverläufen](https://gradiently.design/de/guide/radial-gradient). ## Die Syntax von radial-gradient() ```css /* 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) ``` Form und Größe können in beliebiger Reihenfolge stehen. Die Position folgt immer auf das Wort at. | 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 | Die Teile von radial-gradient(). Nur die Farbstopps sind Pflicht. 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()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/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. - Ellipse: folgt der Box: `radial-gradient(ellipse, #a7f3d0, #059669 50%, #022c22)` - Kreis: bleibt rund: `radial-gradient(circle, #a7f3d0, #059669 50%, #022c22)` Dieselben Stopps von Mint zu Waldgrün. Auf einer breiten Kachel breitet sich die Ellipse seitlich aus, der Kreis nicht. ## 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%`. - closest-side: `radial-gradient(circle closest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)` - closest-corner: `radial-gradient(circle closest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)` - farthest-side: `radial-gradient(circle farthest-side at 30% 40%, #fde047, #ea580c 70%, #1c1917)` - farthest-corner: `radial-gradient(circle farthest-corner at 30% 40%, #fde047, #ea580c 70%, #1c1917)` Eine Sonne, vier Größen. closest-side endet am nächsten Rand, farthest-corner, der Standard, reicht bis zur am weitesten entfernten Ecke. 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. - at top left: `radial-gradient(circle at top left, #c4b5fd, #6d28d9 45%, #1e1b4b)` - at 50% 120%: Horizont: `radial-gradient(ellipse at 50% 120%, #fb7185, #9f1239 45%, #0f0a1e 75%)` - at 80% 20%: `radial-gradient(circle at 80% 20%, #7dd3fc, #0369a1 35%, #082f49)` Den Mittelpunkt zu verschieben verändert die Stimmung stärker als andere Farben. ## 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. ```css .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%); } ``` Drei Flecken in Violett, Rosa und Himmelblau auf fast schwarzem Grund. Ändere eine Position, und die ganze Komposition verschiebt sich. 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. > **Weiche Glows zeigen leicht Banding** Große, kontrastarme radiale Verläufe auf dunklem Grund sind der Ort, an dem Stufen zuerst auffallen. Eine feine Rauschschicht darüber verbirgt sie, siehe [CSS-Rauschtextur](https://gradiently.design/de/guide/css-noise-texture) und [Banding im Farbverlauf](https://gradiently.design/de/guide/gradient-banding). ## 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](https://gradiently.design/de/guide/css-patterns) hat mehr dazu. - Marineblaue Ringe: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 10px, #1e3a8a 10px 20px)` - Eckwellen: `repeating-radial-gradient(circle at 0 100%, #fef3c7 0 6px, #f59e0b 6px 9px, #fef3c7 9px 18px)` Harte Stopps bei festen Längen verwandeln einen radialen Farbverlauf in Ringe. ### 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 `transparent` auslaufen lassen - Glows außermittig platzieren, nahe Ecken oder unter dem Rand - Ein dominanter Glow und ein bis zwei ruhigere ## FAQ ### 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`.