About This Tool
Box Shadow Generator creates a single shadow with horizontal and vertical offsets, blur radius, spread radius, color, opacity, and inset. Valid settings are immediately applied to the preview card.
How to Use
- Adjust the horizontal and vertical offsets and blur radius.
- Set the spread radius, shadow color, and opacity.
- Enable Inset if you want an inner shadow.
- Check the preview and copy CSS, or reset to the default shadow.
Examples
- A negative horizontal offset moves the shadow to the left.
- Positive spread expands the shadow; negative spread shrinks it.
- Enabling inset places the shadow inside the box.
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);How It Works & CSS Details
box-shadow accepts offset-x, offset-y, blur-radius, spread-radius, and color in that order, with optional inset. Offsets and spread can be negative; blur radius must be nonnegative. Opacity controls how the shadow blends with its background.
Common Uses
- Add depth to panels, dialogs, and buttons.
- Compare soft and sharp shadow effects.
- Create inner shadows for form elements.
Privacy
All input processing, calculations, CSS generation, and previews run in your browser. Your content is never uploaded. No backend, database, online API, or third-party CDN is used, and your input is not saved automatically.
FAQ
What is the difference between blur and spread?
Blur controls the softness of the edges. Spread controls how much the shadow shape expands or shrinks before blurring.
What is inset?
inset switches an outer shadow to a shadow inside the box.
Can box-shadow use negative values?
Horizontal offset, vertical offset, and spread can be negative. Blur radius cannot.
Does this tool support multiple shadows?
This page generates one shadow. CSS itself supports multiple box-shadow layers separated by commas.