CSS Box Shadow Generator

Generate CSS box-shadow free online with live preview. Adjust offset, blur, spread, color, and opacity, with support for multiple stacked shadows for depth effects.

Horizontal Offset: 4px

Vertical Offset: 4px

Blur: 12px

Spread: 0px

Opacity: 20% Inset

Browser only.

How to Use This Tool

Adjust offset, blur, and spreadUse the sliders to shape the shadow

Pick a color and opacitySet the shadow's visual tone

Copy the generated CSSReady to paste into your stylesheet

Real-Time Shadow Tuning Instead of Trial-and-Error Saves

Getting a box-shadow to look right -- not too harsh, not too subtle, positioned naturally -- usually means repeatedly adjusting values, saving, and refreshing to check the result. This generator shows the shadow update instantly as you move each slider, turning shadow design into a direct, visual process.

The Four Parameters That Define a Shadow's Character

Offset (horizontal and vertical) positions the shadow relative to its source, suggesting a light direction. Blur softens the shadow's edge, with more blur suggesting a more diffuse light source or greater distance. Spread expands the shadow beyond the element's own size, useful for glow-style effects. Color and opacity set the shadow's visual weight and tint.

Inset Shadows for a Different Visual Language

While a standard shadow suggests an element raised above its background, an inset shadow suggests the opposite -- a pressed or recessed surface, commonly used for input fields, pressed button states, or any UI element that should read as indented rather than elevated.

Frequently Asked Questions

Horizontal and vertical offset position the shadow relative to the element. Blur radius controls how soft or sharp the shadow edge appears. Spread expands or contracts the shadow's size beyond the element's own dimensions. Color (with opacity) sets the shadow's visual color and transparency.

Layering several shadows with different blur and offset values can create more realistic depth, similar to how real-world shadows often have both a sharp contact shadow and a softer ambient shadow -- a technique commonly used in material design and modern card-based UI.

A regular shadow appears outside the element's edges, suggesting it's raised above the background. An inset shadow appears inside the element's boundary, suggesting a pressed or recessed appearance -- useful for input fields or pressed button states.

Box-shadow is purely visual and doesn't affect layout flow or take up space in the document -- it renders outside the element's box without pushing other elements, unlike a border which does affect layout.

Yes, box-shadow has been well-supported across all current major browsers for many years without needing vendor prefixes, making it safe to use without fallback concerns in modern web development.