CSS Visual Directory
Glow Shadow
A coloured halo spreading evenly in every direction rather than falling one way.
Edit Glow Shadow
Change any value to see it update live.
About this entry
What it is
A coloured halo spreading evenly in every direction rather than falling one way.
Focus states, active cards and anything that should look lit from within.
Copy & use
How to copy and use glow shadow
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Focus states, active cards and anything that should look lit from within.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
Spreads colour evenly in all directions with no offset, so the element looks lit from within rather than lit from above.
0 0- No offset. A glow that falls to one side reads as a coloured drop shadow.
24px- Blur, controlling how far the light reaches.
4px- Spread, thickening the glow before the blur begins.
rgba(247, 109, 60, 0.55)- Colour, usually matching the element's own accent.
Making it yours
How to adjust glow shadow
Match the glow colour to the element and raise the spread rather than the blur for a denser halo. Animating the alpha on focus is cheaper than animating the blur.
Worth knowing before you ship it
A glow is a poor focus indicator on its own, since colour alone is not a reliable signal. Keep an outline underneath it for keyboard users.
Common questions
Using glow shadow
What is glow shadow?
A coloured halo spreading evenly in every direction rather than falling one way. Focus states, active cards and anything that should look lit from within.
Where do I put the glow shadow CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Focus states, active cards and anything that should look lit from within. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will glow shadow work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise glow shadow after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing