# Radialer Farbverlauf: der Scheinwerfer, der den Blick lenkt [Canonical HTML page](https://gradiently.design/de/guide/radial-gradient) Ein radialer Farbverlauf ist das, was im Design am ehesten einem Licht entspricht, das du auf etwas richtest. So zielst du damit, bestimmst die Größe und verhinderst, dass er wie eine Zielscheibe aussieht. ## The short version - Ein radialer Farbverlauf mischt Farbe von einem Mittelpunkt aus in Kreisen oder Ellipsen nach außen, statt entlang einer geraden Linie. - Weil das Auge zur hellsten Stelle wandert, wirkt ein radialer Farbverlauf wie ein Scheinwerfer, der zeigt, wohin man zuerst schauen soll. - Die nützlichsten radialen Farbverläufe sitzen außermittig, hinter dem Motiv oder teils außerhalb des Bildes, nicht genau in der Mitte. - Eine Ellipse folgt der Form ihres Containers, ein Kreis behält seine Proportionen, und das zählt bei hohen und breiten Formaten. - Dunkle radiale Leuchten zeigen leicht Streifen, also gib ihnen Raum zum Ausblenden und füge etwas Körnung hinzu. Ein **radialer Farbverlauf** ist ein Übergang, der sich von einem einzigen Punkt aus in Ringen ausbreitet, statt in eine Richtung zu laufen. Die Mitte trägt eine Farbe, und jeder Ring bewegt sich zur nächsten hin. Weil unser Blick zuerst zur hellsten, gesättigtsten Stelle eines Bildes geht, wirkt ein radialer Farbverlauf wie ein Scheinwerfer: Du entscheidest, wo die Aufmerksamkeit landet, und setzt dort deine Überschrift, dein Produkt oder ein Gesicht hin. Dieser Leitfaden zeigt, wie du radiale Farbverläufe im Design einsetzt. Die vollständige Syntax steht unter [CSS radial-gradient()](https://gradiently.design/de/guide/css-radial-gradient), den Vergleich mit linearen, konischen und Mesh-Verläufen findest du unter [Arten von Farbverläufen](https://gradiently.design/de/guide/types-of-gradients). ## Was ein radialer Farbverlauf mit einem Layout macht Ein linearer Farbverlauf deutet eine Richtung an: Licht von oben, einen Horizont, einen Schwung. Ein radialer Farbverlauf deutet eine Quelle an. Diese Quelle wird zum natürlichen Blickpunkt, alles darauf wirkt gewollt und alles an den Rändern zweitrangig. Es ist einer der einfachsten Wege, [visuelle Hierarchie](https://gradiently.design/de/guide/visual-hierarchy) aufzubauen, ohne eine einzige Form hinzuzufügen. Scheinwerfer: `radial-gradient(circle at 50% 38%, #fde68a 0%, #f59e0b 14%, #7c2d12 42%, #1c0a05 78%)` Ein warmer Lichtkegel auf fast schwarzem Grund. Das Auge landet vor allem anderen auf der hellen Mitte. ## Kreis oder Ellipse In CSS ist ein radialer Farbverlauf standardmäßig eine Ellipse, gestreckt auf die Proportionen ihrer Box. Auf einem breiten Banner bedeutet das ein flaches, breites Leuchten, auf einer hohen Story wird daraus ein hohes Oval. Ein Kreis behält in jeder Größe dieselbe Form und wirkt eher wie eine echte Lichtquelle. - Ellipse: folgt dem Format: `radial-gradient(ellipse at center, #a78bfa 0%, #4c1d95 45%, #0f0a1f 100%)` - Kreis: behält seine Form: `radial-gradient(circle at center, #a78bfa 0%, #4c1d95 45%, #0f0a1f 100%)` Gleiche Farben und Stopps. Die Ellipse dehnt sich mit der Box, der Kreis bleibt rund. Nimm eine Ellipse, wenn das Leuchten das Format gleichmäßig füllen soll, wie bei einer Vignette. Nimm einen Kreis, wenn der Verlauf wie eine einzelne Lampe, eine Sonne oder ein Schein hinter einem einzigen Objekt aussehen soll. ## Wohin der Mittelpunkt gehört Ein Leuchten genau in der Mitte eines Quadrats ist der häufigste radiale Farbverlauf und der langweiligste. Er sieht aus wie eine Zielscheibe. Verschiebst du den Mittelpunkt, ändert sich die ganze Stimmung des Bildes. - Mitte: statisch, symmetrisch: `radial-gradient(circle at 50% 50%, #38bdf8 0%, #1e3a8a 40%, #020617 80%)` - Oben links: Licht vom Fenster: `radial-gradient(circle at 22% 18%, #38bdf8 0%, #1e3a8a 40%, #020617 80%)` - Unter dem Bild: steigender Horizont: `radial-gradient(circle at 50% 115%, #38bdf8 0%, #1e3a8a 45%, #020617 85%)` - Unten rechts: hinter einem Motiv: `radial-gradient(circle at 85% 70%, #38bdf8 0%, #1e3a8a 38%, #020617 75%)` Vier Positionen desselben Verlaufs. Nur der Mittelpunkt ändert sich. - **Hinter dem Motiv.** Setz das Leuchten direkt hinter ein Produkt oder Porträt, damit es sich vom Hintergrund löst. - **Auf einem Drittel.** Liegt die Quelle nahe einem Drittel der Breite oder Höhe, wirkt das ausgewogen, ohne statisch zu sein. - **Außerhalb des Bildes.** Ein Mittelpunkt unter oder neben der Fläche ergibt einen weichen Lichtrand, wie ein Sonnenaufgang oder eine Lampe knapp außerhalb des Bildes. - **Weg vom Text.** Sitzt die hellste Stelle unter weißer Schrift, sinkt der Kontrast genau dort, wo du ihn am meisten brauchst. ## Vier Aufgaben, die radiale Farbverläufe gut erledigen ### Scheinwerfer und Fokus Eine helle Mitte auf dunklem Grund zeigt auf das, was darauf steht. Das passt zu Produktfotos, Veranstaltungsplakaten und [Ankündigungsposts](https://gradiently.design/de/guide/announcement-post-design), bei denen eine Sache zählt. ### Vignette Das Gegenteil: eine hellere Mitte, die zu dunkleren Rändern ausläuft. Eine dezente Vignette zieht den Blick nach innen und lässt einen flachen Hintergrund fotografiert wirken. Halte die Veränderung klein, sonst sieht es aus wie ein alter Kamerafilter. Weiche Papiervignette: `radial-gradient(ellipse at center, #f5efe6 0%, #efe4d3 55%, #cdb89a 100%)` Eine helle Vignette auf warmem Papierton. Die Mitte bleibt frei für Text, die Ecken dunkeln sanft ab. ### Leuchten und Schein Ein kleiner, gesättigter Kreis, der ins Transparente ausläuft, wirkt wie Licht, das von etwas ausgeht: ein Neonschild, ein Bildschirm, ein Icon. Leg zwei oder drei davon an verschiedene Stellen, und du bist auf halbem Weg zu einem [Aurora-Farbverlauf](https://gradiently.design/de/guide/aurora-gradients). ### Farbflächen Stapelst du mehrere radiale Farbverläufe mit transparenten Rändern, verschmelzen sie zu einer weichen, organischen Fläche. So werden die meisten [CSS-Mesh-Verläufe](https://gradiently.design/de/guide/css-mesh-gradient) nachgebaut. ```css .poster { background: radial-gradient(circle at 20% 25%, rgb(244 114 182 / 0.85) 0%, transparent 45%), radial-gradient(circle at 80% 30%, rgb(56 189 248 / 0.75) 0%, transparent 50%), radial-gradient(circle at 50% 95%, rgb(250 204 21 / 0.7) 0%, transparent 55%), #0f0a1f; } ``` Drei Leuchten, die über dunklem Grund ins Transparente auslaufen. Die zuerst genannte Ebene liegt oben. ## Radiale Farbverläufe mit Text Ein Veranstaltungsplakat im Hochformat mit einer Überschrift über einer leuchtenden Stelle des Hintergrunds Ein Plakat, bei dem die beleuchtete Fläche hinter der Überschrift liegt. Eine vertikale Story mit einer kurzen Textzeile in einem ruhigen, dunklen Teil des Hintergrunds Eine Story, deren Text im ruhigen, dunkleren Bereich bleibt. Entscheide, welche von zwei Aufgaben das Leuchten hat. Entweder rahmt es die Worte, mit dunkler Schrift auf der hellen Mitte, oder es rahmt den Raum neben den Worten, mit heller Schrift auf dem dunklen Umfeld. Ärger beginnt, wenn der Rand des Leuchtens durch eine Textzeile schneidet, weil sich der Kontrast mitten in der Zeile ändert. Mehr dazu, wie du die ruhige Zone findest, steht unter [Text auf Farbverlauf](https://gradiently.design/de/guide/text-on-gradient). ## Typische Probleme mit radialen Farbverläufen ### Vermeiden - Ein zentriertes Leuchten auf jedem Design, wie eine Zielscheibe - Ein harter Ring, wo zwei Stopps zu nah beieinander liegen - Ein dunkles Leuchten, das auf kurzer Strecke ausläuft und Streifen zeigt - Eine Ellipse, die versehentlich dünn über ein breites Banner gezogen ist ### Besser - Die Quelle dorthin setzen, wo Motiv oder Licht wären - Stopps so verteilen, dass der Abfall wie echtes Licht wirkt - Dunklen Leuchten einen langen Auslauf und etwas Körnung geben - Für jedes Format bewusst Kreis oder Ellipse wählen Auf Banding musst du am meisten achten. Ein Leuchten von tiefem Marineblau zu Schwarz deckt auf großer Fläche nur sehr wenige Farbstufen ab, also entstehen Stufen. Lass den Übergang weiter laufen und füge Körnung hinzu, wie unter [Banding bei Farbverläufen](https://gradiently.design/de/guide/gradient-banding) beschrieben. ## FAQ ### Was ist ein radialer Farbverlauf? Ein radialer Farbverlauf mischt Farben von einem Mittelpunkt aus in Kreisen oder Ellipsen nach außen, statt entlang einer geraden Linie wie ein linearer Farbverlauf. ### Was ist der Unterschied zwischen einem kreisförmigen und einem elliptischen radialen Verlauf? Eine Ellipse dehnt sich auf die Proportionen ihres Containers, ein Kreis behält in jeder Größe dieselbe runde Form. In CSS ist die Ellipse der Standard. ### Wann nehme ich einen radialen statt eines linearen Farbverlaufs? Nimm einen radialen Farbverlauf, wenn du einen Blickpunkt, ein Leuchten oder eine Vignette willst. Nimm einen linearen, wenn du eine Richtung willst, etwa Licht von oben oder einen Horizont. ### Warum sieht mein radialer Farbverlauf wie eine Zielscheibe aus? Wahrscheinlich ist er zentriert und hat Stopps, die nah beieinander liegen. Verschieb den Mittelpunkt aus der Mitte oder aus dem Bild und verteile die Stopps, damit das Licht allmählich ausläuft.