CSS Box Shadow Generator
Adjust sliders to design a CSS box-shadow visually, with live preview and instant code.
How to Use
- Adjust the offset, blur, spread, and color sliders.
- Toggle "inset" for an inner shadow effect.
- Click "Add Shadow" to stack multiple shadows on one element.
- Copy the generated box-shadow CSS property.
When to Use This
- Dialing in a card elevation for a design system, where a tight dark shadow stacked over a wide soft one reads better than one layer.
- Reproducing the recessed look of a pressed button with an inset shadow, where the live preview saves a round trip through a build.
- Replacing a border with a zero-blur shadow at positive spread, which draws a ring without changing the element's computed size.
- Comparing two candidate shadow treatments side by side in a review, by copying one declaration out before adjusting the sliders again.
Frequently Asked Questions
About This Tool
box-shadow paints a copy of the element's border box behind it, offset, blurred and optionally resized. It is a paint-time effect only: a shadow never occupies space and never pushes a sibling along, so it cannot change layout. Spread grows or shrinks that copy before the blur is applied, which is how you draw a tight ring. The inset keyword flips the whole effect inward against the padding box. When several shadows are listed, the first paints on top of the rest.
The controls here are sliders with fixed bounds: horizontal offset, vertical offset and spread run from -50 to 50 pixels, and blur from 0 to 100. The color input and the opacity slider are combined into a single rgba() value rather than written as two properties. Each layer you add gets its own card, and the declaration is applied live to the preview block above.
Notes & Limits
- Offsets and spread stop at 50 pixels and blur at 100, so a more dramatic drop shadow has to be typed into the output by hand.
- The generator emits box-shadow only. text-shadow, and the filter: drop-shadow() function that follows an image's alpha outline instead of the box, are not covered.
- All values are whole pixels, with no em, rem or percentage units, so a shadow meant to scale with font size needs editing afterwards.
- The preview is one fixed rectangle with rounded corners, so a shadow on an element of very different size or border-radius will not look identical.