# Glow-Effekt im Design: weiches Licht ohne Leuchthof

[Canonical HTML page](https://gradiently.design/de/guide/glow-effect)

Ein Glow sollte wie Licht auf einer Fläche aussehen: heller Kern, langes Ausblenden, ein dunkler Raum ringsum. Setze ihn hinter Formen und in Hintergründe und halte ihn von den Rändern deiner Buchstaben fern.

## The short version

- Ein Glow-Effekt ist ein heller Farbkern, der allmählich in eine dunklere Umgebung ausblendet, sodass er wie Licht statt wie Farbe wirkt.
- Glows wirken am besten auf Formen, Buttons, Produktfotos und Hintergründen, wo sie Tiefe geben und den Blick lenken.
- Ein Leuchthof um Text verwischt die Buchstabenränder und macht sie schwerer lesbar, halte Worte also scharf und setze das Licht woanders hin.
- In CSS ist ein weicher Glow meist ein radialer Verlauf, der zu transparent ausblendet, oder ein Box-Shadow mit großer Unschärfe und ohne Versatz.
- Ein Glow braucht einen dunklen oder gedämpften Grund, um zu wirken, und etwas Korn verhindert Banding in seinem langen Ausblenden.

Ein **Glow-Effekt** ist ein Fleck aus Licht: ein heller Farbkern, der langsam in eine dunklere Umgebung ausblendet, als säße eine Lampe knapp hinter der Fläche. Gut eingesetzt gibt er einem flachen Design Tiefe und zieht den Blick auf ein Produkt, einen Button oder eine Form. Schlecht eingesetzt wird er zu einem fusseligen Ring um die Überschrift. Die Regel dieser ganzen Seite ist einfach: Setze den Glow auf Formen und Hintergründe und halte Worte scharf.

## Wo ein Glow hingehört und wo nicht

Licht um ein Objekt sagt, dass dieses Objekt zählt. Licht um Buchstaben tut etwas anderes: Es weicht ihre Ränder auf, senkt den Kontrast zwischen Strich und Hintergrund und lässt die Zeile auf kleinen Bildschirmen unscharf wirken. Deshalb sollte der Glow neben den Worten sitzen, nie um sie gewickelt. Braucht Schrift Hilfe beim Lesen, behebe stattdessen die Fläche dahinter. [Alternativen zum Textschatten](https://gradiently.design/de/guide/text-shadow-alternatives) behandelt die saubereren Optionen.

### Vermeide

- Einen verwischten Leuchthof um die Überschrift
- Glow in derselben Farbe wie die Schrift
- Mehrere gleich starke Glows, die konkurrieren
- Einen hellen Glow auf hellem Hintergrund
- Glow an jedem Button, jeder Karte und jedem Icon

### Tu

- Licht hinter einem Produkt, einer Form oder einem Foto
- Einen Glow zur Seite, Worte über der ruhigen Fläche
- Ein Hauptlicht und höchstens ein schwächeres Echo
- Einen dunklen oder gedämpften Grund, damit das Licht Raum hat
- Glow nur für das eine, das zählt

## Glow-Effekt-Hintergründe mit Codes

Der einfachste leuchtende Hintergrund ist ein radialer Verlauf, der hell beginnt, über einen satteren Mittelton schnell abfällt und in einen fast schwarzen Grund ausblendet. Verschiebst du das Zentrum aus der Mitte, wirkt er wie eine Lichtquelle statt wie eine Zielscheibe.

- Glutglühen: `radial-gradient(circle at 70% 30%, #fde68a 0%, #f97316 18%, #7c2d12 42%, #120a06 75%)`
- Lichtpfütze: `radial-gradient(circle at 30% 70%, #a5f3fc 0%, #0891b2 20%, #083344 48%, #030b10 80%)`
- Bühnenglühen von unten: `radial-gradient(ellipse at 50% 100%, #f0abfc 0%, #a21caf 22%, #3b0764 50%, #0b0414 85%)`
- Limettensignal: `radial-gradient(circle at 80% 20%, #d9f99d 0%, #4d7c0f 22%, #1a2e05 50%, #070b03 80%)`
- Fensterlicht auf Papier: `radial-gradient(ellipse at 20% 15%, #fff7ed 0%, #fed7aa 20%, #f5e6d8 50%, #efe7df 85%)`
- Violette Lampe: `radial-gradient(circle at 75% 25%, #c4b5fd 0%, #6d28d9 16%, #1e1b4b 45%, #09071a 80%)`

Fünf dunkle Glows und ein heller. Die helle Version funktioniert, weil der Glow wärmer und heller ist als ein ohnehin blasser Grund, nicht weil er stärker ist.

Jeder davon hat drei Teile: einen Kern nahe Weiß oder sehr blass, einen gesättigten Mittelstopp und einen tiefen Grund derselben Familie. Lässt du den mittleren Stopp weg, wirkt der Glow dort grau, wo er auf das Dunkel trifft, das Problem aus [matschigen Verläufen](https://gradiently.design/de/guide/muddy-gradients). Mehr zur Form selbst findest du unter [radiale Verläufe](https://gradiently.design/de/guide/radial-gradient).

## So machst du einen Glow, der wie echtes Licht aussieht

1. **Beginne mit einem dunklen oder gedämpften Grund** Licht braucht Dunkelheit, um zu wirken. Ein Blauschwarz, ein tiefes Grün oder ein staubiger Papierton funktionieren alle, ein grellweißer Grund lässt dem Glow keinen Platz.
2. **Gib dem Kern einen helleren, wärmeren Ton** Echtes Licht ist in seinem Zentrum am hellsten und am wenigsten gesättigt. Mache den Kern zu einer blassen Version der Glow-Farbe, etwa `#fde68a` für einen orangen Glow.
3. **Lass ihn langsam abfallen** Das Ausblenden sollte über eine große Fläche laufen, oft das halbe Bild. Ein kurzes Ausblenden sieht wie ein mit der Schere ausgeschnittener Spot aus.
4. **Entscheide, woher das Licht kommt** Platziere den Kern nahe einem Rand oder einer Ecke oder hinter dem Objekt, das er beleuchtet. Halte dann den Rest des Designs in dieser Richtung stimmig.
5. **Füge feines Korn hinzu** Lange dunkle Übergänge sind der Ort, an dem Banding am stärksten auffällt. Eine leichte Rauschebene versteckt die Stufen, [körnige Verläufe](https://gradiently.design/de/guide/grainy-gradients) hat die Methode.

Noch ein Test: Schalte den Glow aus und schau noch einmal hin. Funktioniert das Design noch, gibt der Glow Atmosphäre. Fällt es auseinander, übernimmt der Glow eine Aufgabe, die Layout oder Kontrast erledigen sollten.

## Glow-Effekt in CSS

Es gibt drei verlässliche Wege, im Web einen Glow zu machen. Ein `box-shadow` ohne Versatz und mit großer Unschärfe beleuchtet die Ränder einer Karte oder eines Buttons. Ein radialer Verlauf auf einem Pseudo-Element legt eine weiche Lichtpfütze hinter ein Objekt. Und `filter: blur()` auf einer farbigen Form ergibt das weichste Ergebnis, bei höherem Rendering-Aufwand. Die [box-shadow-Referenz von MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) listet jeden Wert.

```css
/* 1. A button that glows at its edges */
.button-glow {
  background: #7c3aed;
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgb(196 181 253 / 0.4),
    0 0 24px rgb(124 58 237 / 0.55),
    0 0 64px rgb(124 58 237 / 0.25);
}

/* 2. A pool of light behind a product image */
.product {
  position: relative;
  isolation: isolate;
}
.product::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(circle at 50% 55%, rgb(253 230 138 / 0.9), rgb(249 115 22 / 0.35) 35%, transparent 70%);
}

/* 3. A blurred orb in a hero background */
.orb {
  position: absolute;
  width: 480px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0891b2;
  filter: blur(120px);
  opacity: 0.6;
  pointer-events: none;
}
```

Drei Glows, keiner auf Text. Das Stapeln von zwei oder drei Box-Shadows mit abnehmender Stärke ergibt einen weicheren Rand als ein großer Schatten.

| Methode | Am besten für | Aufwand | Achtung bei |
| --- | --- | --- | --- |
| `box-shadow` | Buttons, Karten, Eingabefelder | Niedrig | Wird durch `overflow: hidden` an einem Elternelement abgeschnitten |
| `radial-gradient`-Ebene | Licht hinter Bildern und Abschnitten | Niedrig | Banding bei langen dunklen Übergängen |
| `filter: blur()`-Form | Hero-Hintergründe, Ambient-Kugeln | Höher, besonders bei Animation | Neuzeichnen beim Scrollen kostet, halte sie still oder klein |

Wähle die günstigste Methode, die den Look liefert. Die meisten Glows auf einer Seite sollten Verläufe oder Schatten sein, keine unscharfen Elemente.

Halte den Glow auf Buttons dezent und das Label scharf: Das Licht gehört zur Form des Buttons, nicht zu seinen Worten. Die vollständige Schatten-Syntax steht in [CSS-Box-Shadow](https://gradiently.design/de/guide/css-box-shadow).

## Glow in Posts, Plakaten und Stories

In einem stehenden Design leistet ein Glow seine beste Arbeit hinter dem Motiv oder in der leeren Bildhälfte. Setze das Licht dorthin, wo der Blick zuerst landen soll, und setze die Überschrift dann über den dunkleren, ruhigeren Teil des Grundes. Das Licht führt den Leser zu den Worten, ohne sie zu berühren.

Eine vertikale Event-Story, in der ein heller Fleck des Hintergrunds direkt hinter der Überschrift sitzt und sie ausbleicht

Licht, das mitten durch die Überschrift läuft: Der hellste Bereich landet auf den Buchstaben und macht sie flach.

Dieselbe vertikale Event-Story mit dem hellen Glow von der Überschrift weggeschoben und einer ruhigen dunklen Fläche hinter dem Text

Dieselbe Story mit dem Licht abseits der Worte. Der Glow setzt weiter die Stimmung, und die Schrift bleibt scharf.

Genau das macht ein Mark von Gradiently von selbst. Sein ruhigster Bereich legt sich hinter die Worte, Farben nahe den Buchstaben vertiefen oder heben sich, und Automatische Farbe wählt pro Zeile helle oder dunkle Schrift aus der Palette des Mark, sodass du keine Kästen, Schatten oder Leuchthöfe hinzufügen musst. Die Idee siehst du in [Automatische Farbe](https://gradiently.design/de/guide/auto-ink-legibility).

- Nachtgrund: #09071a
- Indigo-Abfall: #1e1b4b
- Violettes Licht: #6d28d9
- Fliederkern: #c4b5fd
- Warmer Akzent: #fde68a
- Scharfe Schrift: #f8fafc

Eine Glow-Palette in vier Ebenen: Grund, Abfall, Licht und Kern, plus ein warmer Akzent und eine Schriftfarbe, die den Glow nie annimmt.

## Glow, Neon und Light Leaks im Vergleich

Diese drei werden verwechselt. Ein Glow ist weiches, breites Licht aus einer Quelle. [Neonverläufe](https://gradiently.design/de/guide/neon-gradients) sind gesättigte, elektrische Farbe mit einer dünnen hellen Linie im Kern, näher an Leuchtreklame. [Light Leaks](https://gradiently.design/de/guide/light-leaks) sind warme Streifen, die Film imitieren und meist von einem Rand eintreten. Alle drei brauchen einen dunklen Grund, und alle drei bleiben von der Schrift fern. Wenn das Licht treiben und wechseln soll, sind Aurora-Verläufe ein bewegter Verwandter.

## FAQ

### Wie mache ich einen Glow-Effekt in CSS?

Nutze einen `box-shadow` ohne Versatz und mit großer Unschärfe, etwa `0 0 24px` in einer halbtransparenten Farbe, oder einen radialen Verlauf, der hinter dem Element zu transparent ausblendet. Für den weichsten Glow verwische eine farbige Form mit `filter: blur()`.

### Sollte ich einen Glow um Text legen?

Nein. Ein Leuchthof weicht die Buchstabenränder auf und senkt den Kontrast, sodass die Worte schwerer lesbar werden. Halte Text scharf und setze den Glow hinter eine Form oder in den Hintergrund daneben.

### Welcher Hintergrund lässt einen Glow hervortreten?

Ein dunkler oder gedämpfter Grund aus derselben Farbfamilie wie der Glow, etwa ein tiefes Indigo hinter violettem Licht. Auf grellweißem Hintergrund hat ein Glow keinen Platz.

### Warum hat mein leuchtender Verlauf Streifen?

Lange, dunkle Übergänge haben wenige Farbstufen, mit denen sie arbeiten können, daher zeigen Bildschirme sichtbare Streifen. Füge eine feine Kornebene hinzu oder exportiere in höherer Qualität, um sie zu verstecken.

### Was ist der Unterschied zwischen einem Glow und einem Neon-Effekt?

Ein Glow ist breites, weiches Licht aus einer Quelle. Neon ist gesättigte Farbe mit einer dünnen, intensiv hellen Linie in der Mitte, wie eine Leuchtröhre.