CSS Inner Shadow Generator
Online CSS inner shadow generator with visual inset box-shadow controls, live preview, and code copy for pressed buttons and inset card UI styling.
Live Preview
CSS Code
box-shadow: inset 0px 0px 20px 0px rgba(0, 0, 0, 0.5);Inner Shadow Controls
Documentation
Use this CSS inner shadow generator to craft inset box-shadow styles quickly. Adjust offsets, blur, spread, color and opacity visually for UI design and frontend debugging.
What is inset box-shadow
Inset box-shadow is a variant of CSS box-shadow. With the inset keyword, the shadow is rendered inside the element, creating pressed, recessed, or embedded visual effects.
How to use
- Change X/Y offsets to control direction and position.
- Tune blur and spread to shape softness and coverage.
- Pick a color and opacity that works on your background.
- Copy the CSS line and paste it into your component styles.
Inset shadow syntax
box-shadow: inset h-offset v-offset blur-radius spread-radius color;- inset: Keyword that makes the shadow inner.
- h-offset: Horizontal offset (X), can be negative.
- v-offset: Vertical offset (Y), can be negative.
- blur-radius: Blur radius; larger values look softer.
- spread-radius: Spread radius; positive expands, negative shrinks.
- color: Shadow color; rgba is common for opacity control.
Use cases
- Pressed button feedback for hover/active states.
- Recessed cards and panels for depth.
- Inset inputs for focus, disabled, or neumorphic UIs.
- Subtle detail for modern component styling.
FAQ
What is the difference between inset and normal box-shadow?
Normal box-shadow is drawn outside the element to make it pop; inset is drawn inside to make it look recessed or pressed.
How do I create a recessed input effect?
Use inset, choose a moderate blur, a slightly negative spread, and a darker color with low opacity to get a classic inner edge.
Can I use multiple inset shadows?
Yes. box-shadow accepts multiple values separated by commas; for inner shadows, include the inset keyword in each layer.
Privacy
All calculations run locally in your browser; parameters and code are not uploaded.