CSS Inner Shadow Generator
Generate inset box-shadow CSS for pressed surfaces.
Inset shadows for depth
An inset box-shadow makes a surface look recessed or pressed — perfect for input wells, toggles, and neumorphic UI. This generator builds inset shadow CSS with a live preview so you can dial in the pressed-in look precisely.
Inner shadows are subtle: too strong and they look grimy, too soft and they vanish. A live preview lets you tune the offset, blur, and opacity until the surface reads as genuinely inset. Copy the box-shadow declaration when it looks right.
Copy-ready inset shadow
The inset keyword on box-shadow is what makes a surface look recessed rather than raised. The rule is generated in your browser with nothing uploaded.
Frequently asked questions
What makes a shadow "inner"?
The inset keyword. It draws the shadow inside the element's border, which makes a surface look pressed in rather than raised.
Which values can I set?
Horizontal offset, vertical offset, blur, and color. A positive vertical offset like 4px puts the shadow along the top inside edge, as if light comes from above.
Can I combine inset and outer shadows?
Yes. Separate them with commas in one box-shadow, such as inset 0 2px 6px rgba(0,0,0,.2), 0 1px 0 #fff, for a pressed field with a light bottom edge.
Related tools
Practical utilities for front-end design and implementation work.