Inset CSS Box Shadow — Ready-Made Code
Build CSS box-shadow code visually: sliders for offset, blur, spread, color with opacity, inset mode and up to four layers with a live preview.
Result
This page opens the box-shadow generator with the inset checkbox already ticked, so the shadow is drawn inside the element instead of behind it. The preview card shows the sunken effect at once, and every slider keeps updating the CSS line live.
Inset shadows are how CSS fakes depth going inward: pressed button states, search fields and input wells, progress-bar troughs and engraved panels all rely on them. Because the shadow hugs the inner edge, blur and spread behave slightly differently than in a normal drop shadow — the sliders here let you feel that difference immediately.
When the sunken look is right, copy the box-shadow line into your stylesheet. You can also combine an inset layer with regular outer layers — add a second layer and untick inset on it to mix both in one declaration.