See the shadow before you paste CSS
Box-shadow syntax is easy to mistype: blur vs spread, inset keyword placement, rgba alpha. Sliders update a live preview box and a single copy-ready declaration as you drag.
Defaults: 0 X, 10 Y, 20 blur, 0 spread, black at 25% opacity. Reset returns to that baseline. Copy CSS uses the Clipboard API with status feedback.
Preview uses a white card on a neutral background so light shadows remain visible. Dark mode adjusts the card fill, not the shadow math.
Pair with gradients and color tools
Hero sections often combine gradient backgrounds with elevated cards. Build the gradient in the CSS Gradient Generator, then paste shadow on the inner card from this page.
Match brand hex to rgba inputs via the Color Code Converter before you pick on the shadow color input.
Open Graph images and meta tags for the landing page: Meta Tags Generator. Minify the combined stylesheet with the CSS Minifier when bytes matter.
One layer at a time
Material-style cards sometimes stack two shadows. This generator outputs one layer. Duplicate the line in your CSS and tweak values for depth.
Inset shadows suit pressed buttons and wells. Toggle inset and drag Y positive for a top-inner highlight effect.
Spread negative pulls the shadow smaller than the box. Useful for subtle borders without a border property.
Frequently Asked Questions (FAQ)
What do the sliders control?
Offset X and Y move the shadow horizontally and vertically in px. Blur softens the edge. Spread expands or contracts the shadow before blur. Opacity scales the alpha on the chosen color. Inset draws the shadow inside the box.
How is the CSS output formatted?
One line: box-shadow: [inset] Xpx Ypx blur spread rgba(r,g,b,a); Copy grabs that full declaration. The preview box uses the same computed shadow live.
Can I use hex colors with opacity?
The color picker sets RGB; opacity is a separate slider mapped to rgba alpha. That matches how most design handoffs specify drop shadows.
Does this minify my stylesheet?
No. Copy one shadow at a time. To shrink an existing CSS file, use the CSS Minifier and Optimizer on the full sheet.