CSS Visual Directory
Soft Box Shadow
A wide, low-opacity shadow that lifts a card without a visible edge.
Edit Soft Box Shadow
Change any value to see it update live.
About this entry
What it is
A wide, low-opacity shadow that lifts a card without a visible edge.
Default card elevation in modern interfaces.
Copy & use
How to copy and use soft box 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
Default card elevation in modern interfaces.
- 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 a card off the page without drawing a visible edge. The large blur and negative spread mean you read the depth rather than the shadow itself.
0- Horizontal offset. Zero keeps the light directly overhead.
10px- Vertical offset — how far the element appears to float.
30px- Blur radius. Large values give a soft, diffuse edge.
-10px- Negative spread, pulling the shadow in so it stays under the card.
rgba(0, 0, 0, 0.15)- Colour and opacity. Low alpha is what keeps it subtle.
Making it yours
How to adjust soft box shadow
Raise the vertical offset and the blur together — a shadow that falls far but stays sharp reads as an error rather than as height. If it looks muddy, lower the alpha before touching anything else.
Worth knowing before you ship it
Pure black at low opacity turns grey and slightly dead over coloured backgrounds. Tinting the shadow toward the background hue usually looks better than reaching for more opacity.
Common questions
Using soft box shadow
What is soft box shadow?
A wide, low-opacity shadow that lifts a card without a visible edge. Default card elevation in modern interfaces.
Where do I put the soft box shadow CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Default card elevation in modern interfaces. 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 box 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 box 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