Inner (Inset) Box Shadow Generator
Standard shadows go outside. Inner shadows go inside your element, creating a sense of depth as if the element is carved into the page.
When to use this solution:
Use this for 'pressed' button states or to add depth to input fields and progress bars.
Common Use Cases
1Step-by-Step Guide
Toggle 'Inset' mode
Enable the inset checkbox to move the shadow inside the container's border.
Set dark accent color
Choose a color slightly darker than your background for the recessed look.
Moderate the blur
Keep blur low for a sharp 'engraved' look or high for a soft 'pocket' feel.
Grab Inset CSS
Copy the specialized 'box-shadow: inset ...' code for your project.
Ready to get started?
Use our free tool to solve this problem in seconds. No installation required.
Create Inner ShadowFrequently Asked Questions
Can I combine inner and outer shadows?
Yes, you can comma-separate standard and inset shadows in one CSS line.
Why is my inner shadow invisible?
Ensure your element has enough padding or size, and check that the color isn't identical to the element background.