CSS Box Shadow Generator

Controls

Horizontal Offset (px):

Vertical Offset (px):

Blur Radius (px):

Spread Radius (px):

Shadow Color:

Inset Shadow

Generated CSS:

Adjust the sliders or number inputs for Horizontal Offset, Vertical Offset, Blur Radius, and Spread Radius.
Choose the Shadow Color using the color picker and optionally adjust the alpha (transparency) value (0=transparent, 1=opaque).
Check the "Inset Shadow" box if you want an inner shadow instead of an outer shadow.
Observe the live preview to see the effect of your changes.
The generated CSS `box-shadow` code will appear in the text area below.
Click "Copy CSS" to copy the code.

Visual Design: Easily experiment with different shadow effects without writing CSS manually.
Depth & Emphasis: Add depth to elements or make them stand out on the page.
Modern UI: Box shadows are a common element in modern web design.
Save Time: Quickly generate complex shadow code.