Inset Shadow Generator
Create inner shadows for pressed and recessed effects
Shadow Preview
Test the shadow on a more realistic card surface before you export it to production.
0px 10px 30px -12px rgba(0, 0, 0, 0.14), 0px 3px 8px -4px rgba(0, 0, 0, 0.08)Export
Copy the current multi-layer stack as CSS, Tailwind, SCSS, React, HTML, or CSS variables.
box-shadow: 0px 10px 30px -12px rgba(0, 0, 0, 0.14), 0px 3px 8px -4px rgba(0, 0, 0, 0.08);Other Shadow Styles
What are Inset Shadows?
Inset shadows cast inside the element rather than outside, creating the illusion of depth going into the surface. Think pressed buttons, recessed panels, or wells that content sits within—inset shadows make elements feel carved into the page.
The "inset" keyword flips the shadow direction. All other properties—offset, blur, spread, color—work the same way but affect the interior rather than exterior.
Why Use Inset Shadows?
Inset shadows provide crucial visual feedback. Pressed button states feel tactile when they appear to sink into the interface. Input fields with subtle inner shadows look like containers ready to receive content.
Combined with neumorphism techniques, inset shadows create soft UI designs where elements appear molded from the background material—trendy, distinctive, and memorable.
How It Works
Add the inset keyword before shadow values:
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
For pressed button effects, combine with relative positioning shift:
.pressed { box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); transform: translateY(1px); }
Our generator adds the inset keyword automatically when you toggle inner shadow mode.
Common Use Cases
- Pressed button active states
- Input field containers
- Recessed panels and wells
- Neumorphism pressed effects
CSS Example
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);Pro Tip
Combine inset and regular shadows on the same element: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 2px 4px rgba(255,255,255,0.5);