Glow effects in design: soft light without halos round text

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 covers the cleaner options.

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.

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. For more on the shape itself, see radial gradients.

How to make a glow that looks like real light

1. 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. 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. 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. 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. 5

   Add fine grain

   Long dark fades are where banding shows most. A light noise layer hides the steps; 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 lists every value.

/* 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;
}

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.

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.

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.

Glow, neon and light leaks compared

These three get mixed up. A glow is soft, broad light from one source. Neon gradients are saturated, electric colour with a thin bright line at their heart, closer to signage. 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.