CSS Visual Directory
Inner Shadow
An inset shadow that makes an element look pressed in.
Edit Inner Shadow
Change any value to see it update live.
About this entry
What it is
An inset shadow that makes an element look pressed in.
Inputs, wells and active toggle states.
Copy & use
How to copy and use inner 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
Inputs, wells and active toggle states.
- 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
Draws the shadow inside the box, making the surface look pressed in rather than raised. It is the standard treatment for inputs and wells.
inset- The keyword that moves the shadow inside. Remove it and the effect inverts.
0 2px- Offset, pushing the shading against the top edge as though lit from above.
6px- Blur. Small values look like a crisp lip; large ones look like a hollow.
rgba(0, 0, 0, 0.2)- Colour and strength of the recess.
Making it yours
How to adjust inner shadow
Keep the offset positive and small. Once the vertical offset passes the blur, the shading separates into a visible band instead of reading as depth.
Worth knowing before you ship it
Inset shadows sit under the background but over the border, so a light border and a dark inset shadow can look like a rendering fault at small sizes.
Common questions
Using inner shadow
What is inner shadow?
An inset shadow that makes an element look pressed in. Inputs, wells and active toggle states.
Where do I put the inner shadow CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Inputs, wells and active toggle states. 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 inner 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 inner 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