Button pressed state
- Input
- :active pseudo-class em botão
- Expected output
- box-shadow: inset 0 2px 4px rgba(0,0,0,.2), inset 0 1px 2px rgba(0,0,0,.15);
Pairs with `transform: translateY(1px)` for a complete press effect.
CSS inset shadow depth effect
CSS inset shadow: depth effects, neumorphism and pressed state
The `inset` keyword in box-shadow reverses the shadow direction: instead of projecting outward, it appears inside the element. This is used to create pressed states on buttons, sunken input fields, neumorphism effects and any situation where the goal is to make the element appear below the screen surface.
Continue in the tool
Open full toolHow to combine inset and outer shadows for complete effects
- Neumorphism uses a double shadow technique: a light external shadow at the top-left corner and a dark one at the bottom-right (or vice versa), creating an extrusion illusion. In the pressed state, shadows are reversed using `inset`. The key is that the background, element and shadows all share the same hue.
- For inputs and textareas, a subtle inset shadow replaces `border` and conveys the feeling of a sunken field. `box-shadow: inset 0 2px 4px rgba(0,0,0,.12)` is a widely used pattern that reads as "you type here" without looking generic.
Inset shadow use cases
Sunken input field
- Input
- input:focus
- Expected output
- box-shadow: inset 0 2px 6px rgba(0,0,0,.1), 0 0 0 2px rgba(61,220,151,.3);
Inner for depth + outer for accessibility focus ring.
Full tool FAQ
Yes. CSS allows as many layers as needed, separated by commas. Each layer has its own offset, blur, spread and color parameters, enabling much richer effects than a single shadow.
Frequently asked questions
Can I mix inset and outer shadow on the same element?
Yes. CSS applies both to the same element without issue. It is common to have an inset for inner depth and an outer for a focus ring or elevation simultaneously.
Is neumorphism accessible?
Neumorphism has serious accessibility issues because the low contrast between elements makes it difficult for users with low vision to identify interactive elements. Prefer applying it only to secondary or decorative elements.