# Glow effects in design: soft light without halos round text

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

A glow should look like light falling on a surface: a bright core, a long fade, a dark room around it. Put it behind shapes and into backgrounds, and keep it away from the edges of your letters.

## The short version

- A glow effect is a bright core of colour that fades gradually into a darker surrounding, so it reads as light rather than paint.
- Glows work best on shapes, buttons, product photos and backgrounds, where they add depth and direct the eye.
- A halo of glow around text blurs the edges of the letters and makes them harder to read, so keep words crisp and put the light elsewhere.
- In CSS, a soft glow is usually a radial gradient fading to transparent or a box shadow with a large blur and no offset.
- A glow needs a dark or muted ground to show, and a little grain stops its long fade from banding.

A **glow effect** is a patch of light: a bright core of colour that fades slowly into a darker surrounding, as if a lamp sat just behind the surface. Used well, it adds depth to a flat design and pulls the eye to a product, a button or a shape. Used badly, it becomes a fuzzy ring around the headline. The rule this whole page follows is simple: put the glow on shapes and backgrounds, and keep words sharp.

## Where a glow belongs, and where it does not

Light around an object says that object matters. Light around letters does something different: it softens their edges, lowers the contrast between stroke and background, and makes the line look out of focus on small screens. That is why the glow should sit near the words, never wrapped around them. If type needs help to read, fix the area behind it instead; [text shadow alternatives](https://gradiently.design/guide/text-shadow-alternatives) covers the cleaner options.

### Avoid

- A blurred halo hugging the headline
- Glow in the same colour as the type
- Several glows of equal strength competing
- A bright glow on a bright background
- Glow added to every button, card and icon

### Do

- Light behind a product, shape or photo
- A glow off to one side, words over the calm area
- One main light and at most one weaker echo
- A dark or muted ground so the light has room
- Glow reserved for the one thing that matters

## Glow effect backgrounds with codes

The easiest glowing background is a radial gradient that starts bright, drops quickly through a richer middle tone and fades into a near black ground. Moving the centre off the middle makes it feel like a light source rather than a target.

- Ember glow: `radial-gradient(circle at 70% 30%, #fde68a 0%, #f97316 18%, #7c2d12 42%, #120a06 75%)`
- Pool light: `radial-gradient(circle at 30% 70%, #a5f3fc 0%, #0891b2 20%, #083344 48%, #030b10 80%)`
- Stage glow from below: `radial-gradient(ellipse at 50% 100%, #f0abfc 0%, #a21caf 22%, #3b0764 50%, #0b0414 85%)`
- Lime signal: `radial-gradient(circle at 80% 20%, #d9f99d 0%, #4d7c0f 22%, #1a2e05 50%, #070b03 80%)`
- Window light on paper: `radial-gradient(ellipse at 20% 15%, #fff7ed 0%, #fed7aa 20%, #f5e6d8 50%, #efe7df 85%)`
- Violet lamp: `radial-gradient(circle at 75% 25%, #c4b5fd 0%, #6d28d9 16%, #1e1b4b 45%, #09071a 80%)`

Five dark glows and one light one. The light version works because the glow is warmer and brighter than an already pale ground, not because it is stronger.

Each of these has three parts: a core that is close to white or very pale, a saturated middle stop, and a deep ground in the same family. Skip the middle stop and the glow looks grey where it meets the dark, the problem described in [muddy gradients](https://gradiently.design/guide/muddy-gradients). For more on the shape itself, see [radial gradients](https://gradiently.design/guide/radial-gradient).

## How to make a glow that looks like real light

1. **Start with a dark or muted ground** Light needs darkness to show. A blue black, a deep green or a dusty paper tone all work; a bright white ground leaves the glow nowhere to go.
2. **Give the core a lighter, warmer tint** Real light is brightest and least saturated at its centre. Make the core a pale version of the glow colour, such as `#fde68a` for an orange glow.
3. **Let it fall off slowly** The fade should run across a large area, often half the frame. A short fade looks like a spotlight cut out with scissors.
4. **Decide where the light comes from** Place the core near an edge or corner, or behind the object it lights. Then keep the rest of the design consistent with that direction.
5. **Add fine grain** Long dark fades are where banding shows most. A light noise layer hides the steps; [grainy gradients](https://gradiently.design/guide/grainy-gradients) has the method.

One more test: switch the glow off and look again. If the design still works, the glow is adding atmosphere. If it falls apart, the glow is doing a job that layout or contrast should be doing.

## Glow effect in CSS

There are three reliable ways to make a glow on the web. A `box-shadow` with zero offset and a large blur lights the edges of a card or button. A radial gradient on a pseudo element puts a soft pool of light behind an object. And `filter: blur()` on a coloured shape gives the softest result, at a higher rendering cost. The [MDN box-shadow reference](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) lists every value.

```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;
}
```

Three glows, none of them on text. Stacking two or three box shadows of falling strength gives a softer edge than one large shadow.

| Method | Best for | Cost | Watch out for |
| --- | --- | --- | --- |
| `box-shadow` | Buttons, cards, inputs | Low | Clipped by `overflow: hidden` on a parent |
| `radial-gradient` layer | Light behind images and sections | Low | Banding on long dark fades |
| `filter: blur()` shape | Hero backgrounds, ambient orbs | Higher, especially when animated | Repaint cost on scroll; keep it still or small |

Pick the cheapest method that gives the look. Most glows on a page should be gradients or shadows, not blurred elements.

On buttons, keep the glow subtle and the label crisp: the light belongs to the button's shape, not to its words. The full shadow syntax is in [CSS box shadow](https://gradiently.design/guide/css-box-shadow).

## Glow in posts, posters and stories

In a still design, a glow does its best work behind the subject or in the empty half of the frame. Put the light where the eye should land first, then set the headline over the darker, calmer part of the ground. The light leads the reader to the words without touching them.

A vertical event story where a bright patch of the background sits right behind the headline and washes it out

Light running straight through the headline: the brightest area lands on the letters and flattens them.

The same vertical event story with the bright glow moved away from the headline and a calm dark area behind the text

The same story with the light kept clear of the words. The glow still sets the mood, and the type stays sharp.

This is exactly what a Gradiently Mark does on its own. Its calmest region settles behind the words, colours near the letters deepen or lift, and Auto ink picks light or dark type per line from the Mark's palette, so there are no boxes, shadows or halos to add. You can see the idea in [Auto ink](https://gradiently.design/guide/auto-ink-legibility).

- Night ground: #09071a
- Indigo falloff: #1e1b4b
- Violet light: #6d28d9
- Lilac core: #c4b5fd
- Warm accent: #fde68a
- Crisp type: #f8fafc

A glow palette in four layers: ground, falloff, light and core, plus one warm accent and a type colour that never takes on the glow.

## Glow, neon and light leaks compared

These three get mixed up. A glow is soft, broad light from one source. [Neon gradients](https://gradiently.design/guide/neon-gradients) are saturated, electric colour with a thin bright line at their heart, closer to signage. [Light leaks](https://gradiently.design/guide/light-leaks) are warm streaks that imitate film, usually entering from an edge. All three need a dark ground, and all three stay off the type. If you want the light to drift and shift, aurora gradients are a moving relative.

## FAQ

### How do I make a glow effect in CSS?

Use a `box-shadow` with no offset and a large blur, such as `0 0 24px` in a semi transparent colour, or a radial gradient that fades to transparent behind the element. For the softest glow, blur a coloured shape with `filter: blur()`.

### Should I put a glow around text?

No. A halo softens the letter edges and lowers contrast, so the words get harder to read. Keep text crisp and place the glow behind a shape or in the background nearby.

### What background makes a glow stand out?

A dark or muted ground in the same colour family as the glow, such as a deep indigo behind a violet light. On a bright white background a glow has nowhere to go.

### Why does my glowing gradient have bands?

Long, dark fades have few colour steps to work with, so screens show visible bands. Add a fine grain layer or export at higher quality to hide them.

### What is the difference between a glow and a neon effect?

A glow is broad, soft light from one source. Neon is saturated colour with a thin, intensely bright line at its centre, like a sign tube.