What does the inset option do?

The inset keyword makes the shadow appear inside the element instead of outside. Inset shadows are drawn within the border and above the background, useful for sunken or pressed effects.

What is the difference between blur and spread?

Blur radius determines how soft the shadow edge is — higher values produce a more diffuse shadow. Spread radius expands or contracts the shadow in all directions before blurring.

Can I layer multiple box shadows?

Yes, CSS allows multiple comma-separated box-shadow values. This generator creates a single shadow; you can combine the output with other shadows manually in your CSS.

CSS Box Shadow Generator

Generate CSS box-shadow code with live preview using interactive sliders.

X Offset4px

Y Offset4px

Blur10px

Spread0px

Shadow Color

Inset

CSS

box-shadow: 4px 4px 10px 0px #000000;

Related Tools

#cCSS Gradient Generator

Generate CSS linear gradient code with live preview and one-click copy.

CSSCSS Border Radius Generator

Generate CSS border-radius code with live preview for all four corners.

<->CSS Flexbox Generator

Interactive CSS flexbox playground with live preview and copyable CSS code.

FAQ

What does the inset option do?: The inset keyword makes the shadow appear inside the element instead of outside. Inset shadows are drawn within the border and above the background, useful for sunken or pressed effects.
What is the difference between blur and spread?: Blur radius determines how soft the shadow edge is — higher values produce a more diffuse shadow. Spread radius expands or contracts the shadow in all directions before blurring.
Can I layer multiple box shadows?: Yes, CSS allows multiple comma-separated box-shadow values. This generator creates a single shadow; you can combine the output with other shadows manually in your CSS.

The CSS Box Shadow Generator provides interactive range sliders for x-offset, y-offset, blur radius, and spread radius, plus a color picker and inset toggle. A live preview box shows the shadow in real time and the generated CSS box-shadow property is ready to copy with one click.