🎨 Box Shadow Playground

The box-shadow CSS property adds shadow effects around an element's frame. Its full syntax is:
box-shadow: offset-x offset-y blur-radius spread-radius color inset;
You can specify multiple shadows separated by commas. The property is widely supported across all modern browsers and is essential for creating depth, elevation, and visual hierarchy in web design.

• offset-x — Horizontal offset. Positive values push the shadow right, negative values push it left.
• offset-y — Vertical offset. Positive values push the shadow down, negative values push it up.
• blur-radius — Controls the blur. 0 gives a sharp edge; higher values create softer, more diffused shadows.
• spread-radius — Expands or contracts the shadow. Positive values make the shadow larger; negative values shrink it.
• color — Any valid CSS color (hex, rgba, hsl, etc.). Semi-transparent colors often look most natural.
• inset — Optional keyword that places the shadow inside the element instead of outside.

Add the inset keyword to your box-shadow declaration. For example:
box-shadow: inset 2px 2px 8px rgba(0,0,0,0.2);
Inset shadows appear inside the element, creating a recessed or pressed effect. They're commonly used for input fields, buttons in active states, and creating depth in card designs. Toggle the Inset switch in the control panel above to experiment.

Yes! Separate each shadow with a comma. For example:
box-shadow: 2px 2px 5px rgba(0,0,0,0.1), 0 10px 30px rgba(0,0,0,0.15), inset 0 1px 3px rgba(255,255,255,0.3);
This tool supports up to 3 independent shadow layers. Use the layer tabs to switch between them, and the preview will show all active layers combined. Multiple shadows are great for creating realistic depth, glow effects, and complex material design elevations.

Generally, box-shadow is GPU-accelerated in modern browsers and performs well. However, large blur-radius values (e.g., over 100px) combined with many shadow layers on numerous elements can impact rendering performance, especially on mobile devices or during animations. For performance-critical scenarios, consider using fewer layers, smaller blur values, or the will-change: box-shadow hint for animated elements.

box-shadow follows the element's rectangular box model and respects border-radius. filter: drop-shadow() follows the alpha channel of the element's content, so it works with irregular shapes, PNG transparency, and SVG elements. Drop-shadow also does not support spread-radius or inset. Choose based on your use case: box-shadow for UI elements, drop-shadow for images and complex shapes.

For realistic elevation, layer multiple shadows with increasing blur and decreasing opacity. A popular pattern inspired by Material Design:
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.06);
Try the "Material Card" preset above to see this in action. Adjust the y-offset and blur for different elevation levels — larger offsets and blurs create the illusion of the card floating higher above the surface.