CSS Visual Directory
Soft Text Shadow
A subtle drop shadow that keeps text readable over images.
Edit Soft Text Shadow
Change any value to see it update live.
About this entry
What it is
A subtle drop shadow that keeps text readable over images.
Hero headlines sitting on photography.
Copy & use
How to copy and use soft text 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
Hero headlines sitting on photography.
- 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
Lifts text off a busy background just enough to stay readable, without the outline look a hard shadow gives.
0 2px- A small downward offset, matching light from above.
4px- Blur. Roughly double the offset keeps it soft rather than doubled-up.
rgba(0, 0, 0, 0.25)- Strength. Above about 0.4 it starts to look like a second copy.
Making it yours
How to adjust soft text shadow
For text over a photograph, increase the blur rather than the opacity. A wide faint shadow separates the letters from the image far more cleanly than a tight dark one.
Worth knowing before you ship it
A text shadow is not a substitute for contrast. It helps legibility but does not count toward the contrast ratio an accessibility check will measure.
Common questions
Using soft text shadow
What is soft text shadow?
A subtle drop shadow that keeps text readable over images. Hero headlines sitting on photography.
Where do I put the soft text shadow CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Hero headlines sitting on photography. 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 soft text 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 soft text 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