Member Avatar for RikTelner

text-shadow: 0 0 5px #FFFFFF;

Gives a white shadow, with 5px blur. But it's too weak. Is there way to make it stronger(/lighter) without modifying blur?

  • 2 Contributors
  • 1 Reply
  • 70 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

— you can make that white halo look stronger without increasing the blur radius. is right that contrast helps, but you can also rely on compositing tricks and layering in CSS to boost perceived brightness.

A simple, widely used approach is to layer the same shadow multiple times (comma-separated). Each duplicate adds light without changing the blur:

.my-text {
  text-shadow:
    0 0 5px rgba(255,255,255,0.9),
    0 0 5px rgba(255,255,255,0.9),
    0 0 5px rgba(255,255,255,0.9);
}

Performance note: three to five layers are usually enough; many more will increase paint cost.

If you need more control, duplicate the text with a pseudo-element, blur that duplicate and use an additive blend to make the glow pop (works especially well on dark backgrounds). Another alternative for a sharper halo is a thin stroke around the letters with the vendor-prefixed property; it gives a solid rim rather than a soft glow:

See browser notes for the vendor-prefixed stroke on MDN: MDN: -webkit-text-stroke.

Practical tips: increase opacity (rgba) rather than blur; prefer high-contrast foreground/background for legibility; test on target devices because multiple layers and filters can affect rendering speed on low-power hardware.

Member Avatar for JorgeM

White (#ffffff) is a white as it gets. Assuming the text is not black (#000000), you can darken the text and or darken the background to make the shadow look "lighter" (contrast).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.