How to Create Glowing Effects with CSS

Use text-shadow to glow text, box-shadow to glow a button or rectangular element, and filter: drop-shadow() when a glow should follow the silhouette of a transparent image or icon. Layer a tight, bright shadow with a wider, softer one to make a more convincing halo.

The snippets below are CSS you can paste into a page. Choose the property based on the shape that should glow, then adjust its color and blur against the actual background.

1. Choose the right CSS glow

Technique	Best for	Shape of the glow	Controls
`text-shadow`	Text and headings	Follows the letter shapes	Horizontal offset, vertical offset, blur, color; multiple comma-separated shadows
`box-shadow`	Buttons, cards, panels	Follows the element’s rectangular frame	Offset, blur, spread, color; can be inset
`filter: drop-shadow()`	Transparent PNGs, SVGs, irregular images	Follows the nontransparent image silhouette	Offset, blur, color; no spread or inset

A transparent logo with empty corners illustrates the difference: box-shadow can glow around its rectangular image box, while drop-shadow() follows the visible artwork. See MDN’s references for text-shadow, box-shadow, and drop-shadow().

2. Create glowing text

For an even halo around text, set both offsets to zero. A list of shadows lets you combine a close highlight with broader, softer color:

.neon-text {
  color: #fff;
  text-shadow:
    0 0 0.15em #fff,
    0 0 0.45em #00eaff,
    0 0 1em #00aaff;
}

Each shadow has horizontal offset, vertical offset, blur radius, and color, in that order. The zero offsets center the glow. The smaller blur creates a tighter core; the larger blur creates the outer halo. Increase blur or add another shadow for a broader effect, but check that the letters remain easy to read. text-shadow accepts multiple comma-separated shadows.

Directional glow

Use nonzero offsets to make the light appear to come from one side. For example, a positive horizontal offset moves the shadow right:

.directional-glow {
  color: #fff;
  text-shadow: 0.08em 0 0.3em #00eaff;
}

For a colored sign effect, the text color and glow color can differ. Keep the text color strong enough to read without relying on the fuzzy halo.

3. Make a glowing button or card

box-shadow follows the element’s box, making it a natural fit for buttons, cards, and panels. Start with a close shadow and layer a wider one behind it:

.glow-card {
  border: 1px solid #52efff;
  border-radius: 0.75rem;
  background: #101a2b;
  color: #fff;
  padding: 1.25rem;
  box-shadow:
    0 0 0.25rem #00eaff,
    0 0 1rem #00aaff;
}

.glow-button {
  border: 1px solid #54edff;
  border-radius: 0.5rem;
  background: #101a2b;
  color: #fff;
  padding: 0.75rem 1rem;
  box-shadow: 0 0 0.25rem #00eaff, 0 0 0.9rem #00aaff;
}

The shadow values are ordered as horizontal offset, vertical offset, blur radius, spread radius (optional), and color. These examples omit offsets and spread, centering the halo around the frame. A positive spread expands a shadow before blur; a negative spread contracts it. Use spread when you want to change the shadow’s footprint independently of its blur.

Inset glow

Add the inset keyword to draw a shadow inside the element’s frame. This can suggest a lit edge or a recessed surface:

.inset-glow {
  box-shadow: inset 0 0 0.8rem #00aaff;
}

Use the exterior shadow for light around the outside; use an inset shadow for light inside the box. You can combine them in a comma-separated list if the design needs both.

4. Make a glow follow a transparent image or icon

Apply drop-shadow() when the glow should follow the visible pixels of an image rather than its rectangular box. It accepts horizontal and vertical offsets, a blur radius, and a color:

.glowing-icon {
  filter: drop-shadow(0 0 3px magenta);
}

This works well for transparent PNG artwork and SVG shapes with irregular outlines. Unlike box-shadow, drop-shadow() has no spread or inset parameter. For a halo with multiple layers, CSS filters can be chained:

.glowing-icon {
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 8px #00eaff);
}

MDN documents filter effects and uses drop-shadow() for a glow example. If the asset has an opaque background, the shadow follows that opaque shape too; use an image with transparency when the halo should track only the artwork.

5. Tune the glow without losing legibility

Choose a glow color. Use a color that contrasts with the surface behind the element. A pale core with a saturated outer color can make the effect distinct.
Start with zero offsets. For a centered halo, use 0 0. Add offsets only when a directional shadow is intended.
Set a modest blur first. Increase the blur gradually. For text shadows, a larger blur looks wider and softer, and can make the text less distinct.
Layer only as needed. A tighter shadow plus a broader one often creates depth. More layers are not automatically better; check the result at the size it will appear in the page.
Check the real background. The same glow can look different on a light surface, a dark surface, and an image. Verify each supported theme.
Keep contrast independent of decoration. A glow does not guarantee that text is readable. WCAG 2.2 specifies a contrast ratio of 4.5:1 for normal text and 3:1 for large text, subject to its stated exceptions. Check the text against its background, not against the halo. See W3C WAI’s explanation of Contrast (Minimum).

6. Add a pulsing glow accessibly

A glow can be animated by changing shadow blur or color in a keyframe animation. Because the pulsing is decorative, disable it for users who request reduced motion:

.pulsing-glow {
  animation: pulse-glow 1.8s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
  from {
    text-shadow: 0 0 0.2em #00eaff;
  }
  to {
    text-shadow: 0 0 0.8em #00aaff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsing-glow {
    animation: none;
  }
}

The media query turns off this nonessential animation when the user’s system preference asks for reduced motion. MDN explains media queries for accessibility.

7. Common problems and fixes

Problem	Likely cause	Fix
The text looks blurred or hard to read	The blur is too wide, or the glow is doing too much work for contrast.	Reduce the blur, remove outer shadow layers, and use a text color that contrasts with the background on its own.
A logo has a rectangular halo	`box-shadow` follows the image element’s rectangular frame.	Use `filter: drop-shadow()` with an image that has transparency so the shadow can follow its visible silhouette.
The glow looks too small or too faint	The blur, spread, or color is too subtle for the element and background.	Increase blur gradually; for a box, adjust spread separately if needed. Check the effect on the intended surface.
The glow is clipped at a container edge	An ancestor’s layout or clipping can cut off content that extends outside its box.	Inspect the surrounding layout and clipping styles. Allow room around the glowing element or adjust the container’s clipping behavior where appropriate.
The animation still moves for some users	The reduced-motion rule may not match the animated element or may be overridden by another rule.	Confirm the selector matches the element and inspect the cascade. Keep the `prefers-reduced-motion: reduce` rule after the animation rule or use sufficient specificity.
The glow appears on the whole image, not just the artwork	The source image has an opaque background.	Use a transparent asset if the intended silhouette excludes the background.

8. Performance and maintenance

Keep the effect proportionate to the design: a small number of shadow layers is easier to tune and maintain than a long stack. Animated shadows can require repeated visual updates, so reserve motion for elements where it communicates something useful and honor reduced-motion preferences. The research sources establish the CSS behavior described here but do not provide comparative browser performance benchmarks; measure in the target page if the effect is applied broadly or animated heavily.

Prefer reusable classes and shared color values when the same glow appears across multiple components. That makes it easier to tune the design consistently and to remove or soften the effect without editing every element separately.

9. Or skip the browser setup

If you need a screenshot of a page to review a CSS glow across layouts or themes, you can use ScreenshotNeo, a website screenshot API and MCP server. Its one-call API returns a screenshot or PDF. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners are accepted and more than 60 known consent platforms, newsletter popups, and chat widgets are removed before the shot; each step can be turned off.
Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. Response headers report the page verdict and whether the request was billed.
An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents, including Claude, Cursor, and other MCP clients.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is on every plan.

10. FAQ

Can I use more than one glow technique on the same element?

Yes. For example, a heading can have text-shadow, and a surrounding card can have box-shadow. Choose each property for the shape it should affect.

Does `drop-shadow()` support spread?

No. It accepts offsets, blur, and color. Use box-shadow when you need spread or an inset shadow.

Does a glow replace a focus indicator?

A decorative glow should not be assumed to communicate keyboard focus. If you use a glow as a focus treatment, verify that the focus state is clear against the page and remains visible for the people navigating it.

Where can I check the exact CSS syntax?

Use the MDN references for text-shadow, box-shadow, and drop-shadow().