CSS Box-Shadow Generator

Box shadows add depth to cards, buttons, and modals, but the CSS syntax packs five values into one property (offset-x, offset-y, blur, spread, and color) in a specific order that's hard to visualize without seeing the result. This tool lets you adjust each value with a slider and see the shadow update live before copying the final CSS.

What each slider controls

Horizontal and vertical offset shift the shadow left/right and up/down relative to the element. Blur radius softens the shadow's edge — a higher value spreads the shadow out more gradually. Spread radius expands or shrinks the shadow's size independently of the element itself (a negative spread makes the shadow smaller than the element). Color and opacity control the shadow's tint and how strong or subtle it appears against the background.

Common design uses for box-shadow

Giving a card component a subtle lift off the page background, a very common pattern in modern web design. Creating a soft glow or focus ring around a button or input field on hover or focus. Adding an inset (inner) shadow to make an element look pressed in or recessed, often used for toggle switches or pressed button states. Layering multiple shadows for a more realistic, soft "elevation" effect similar to material design shadows.

Frequently Asked Questions

Can I combine multiple shadows on one element? This tool generates a single shadow value; CSS does support comma-separating multiple box-shadow values for a layered effect, which you can add manually by combining two generated shadow strings.

What does the "inset" checkbox actually change? Checking it moves the shadow inside the element's boundary instead of outside, creating a pressed-in or recessed appearance rather than the default shadow that appears to lift the element up.

Is my design choice saved anywhere? No — the shadow is generated and previewed entirely in your browser using CSS and JavaScript; nothing is stored or transmitted.