OptiDrop

CSS Box Shadow Generator — Create Box Shadows Online

Design CSS box shadows with live preview. Adjust X offset, Y offset, blur, spread, color, and inset. Copy the CSS code instantly. 100% free, no sign-up.

Shadow Controls

Live Preview

box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25);

Quick Presets

What do you want to do next?

CSS Gradient Generator CSS Minifier

Free CSS Box Shadow Generator Online

OptiDrop's CSS Box Shadow Generator lets you design perfect box shadows with an intuitive interface and live preview. Adjust horizontal and vertical offsets, blur radius, spread radius, shadow color with opacity, and toggle inset mode. The generated CSS code is ready to paste into your stylesheet.

How to Use the Box Shadow Generator

Use the sliders to adjust shadow offset, blur, and spread. Pick a shadow color and set its opacity. Toggle inset to create inner shadows. The preview updates in real time so you can see exactly how the shadow will look. When satisfied, click the "Copy" button to copy the CSS code to your clipboard.

Understanding Box Shadow Values

The CSS box-shadow property takes up to six values: horizontal offset, vertical offset, blur radius, spread radius, color, and the inset keyword. Positive X offsets push the shadow right, positive Y offsets push it down. Blur controls softness (higher = softer). Spread controls size (positive = larger, negative = smaller). Use the presets to quickly explore common shadow styles.

Frequently Asked Questions

The CSS box-shadow property adds shadow effects around an element's frame. It accepts values for horizontal offset, vertical offset, blur radius, spread radius, color, and an optional 'inset' keyword. Multiple shadows can be applied by separating them with commas. Box shadows are widely used in modern web design for depth and elevation effects.
Blur radius controls how soft or sharp the shadow edge is. A blur of 0 creates a sharp shadow, while higher values create a softer, more diffused shadow. Spread radius controls the size of the shadow — positive values expand it beyond the element size, and negative values shrink it. Both work together to create the final shadow appearance.
The 'inset' keyword changes the shadow from an outer shadow to an inner shadow. Instead of the shadow appearing outside the element's border, it appears inside the element. Inner shadows are commonly used for input fields, pressed buttons, and card inset effects in modern UI design.
Yes, CSS supports multiple box shadows on a single element. You separate each shadow definition with a comma in the box-shadow property value. This allows you to create complex shadow effects like layered shadows, colored glows, or realistic material design elevation effects. Each shadow can have its own offset, blur, spread, and color.

Last updated: June 2026