CSS Box Shadow Generator | Visual Shadow Editor

How do I generate a CSS box shadow with custom offset and blur?

Use the sliders to set Offset X, Offset Y, Blur, and Spread in pixels, pick a shadow color and opacity, then click Add This Shadow. The CSS output updates immediately. For example, a soft card shadow might read: box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);

What is the difference between blur and spread in box-shadow?

Blur controls how soft the shadow edge is — higher values create a more diffuse glow. Spread expands or contracts the shadow before blurring; a positive spread makes the shadow larger than the element, while a negative spread shrinks it. A shadow with blur: 30px and spread: -10px gives a realistic floating effect with the hard edge pulled in.

How do I create an inset shadow to make an element look pressed?

Check the Inset shadow checkbox before clicking Add This Shadow. An inset shadow is drawn inside the element’s border box, making it appear recessed or pressed. The CSS will include the inset keyword: box-shadow: inset 0px 2px 8px 0px rgba(0, 0, 0, 0.30);

Can I stack multiple box shadows on one element?

Yes. Add each shadow layer individually — the tool maintains a list and combines them with commas in the output. Stacking is a standard CSS feature: box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 20px 40px -10px rgba(0,0,0,.3); Multiple layers create richer depth than a single shadow can.

What is a limitation of the box-shadow generator?

Box-shadow does not respect border-radius on child elements — it follows the border-radius of the element the property is applied to, not any inner shape. Also, very large blur values on many stacked shadows can hurt scroll performance on mobile; consider using filter: drop-shadow() as a GPU-composited alternative for SVGs or PNG images.