Paano gamitin

1Choose a preset. Start with a soft card, lifted button, inset panel or hard outline preset to get a useful baseline.

2Tune the surface. Pick the preview card color and border radius so the shadow is tested against a realistic element.

3Adjust shadow layers. Move each layer with X and Y offsets, set blur and spread, choose the color, opacity and optional inset mode.

4Copy the CSS. Use Copy to grab the full box-shadow declaration and paste it into your stylesheet.

Para kanino ito

Front-end developers building card, modal, button and menu shadows without memorizing the full box-shadow syntax.

UI designers matching a mockup by adjusting depth, softness, spread and opacity before handing off the CSS.

Design-system maintainers comparing soft elevation, inset panel and hard outline styles before adding tokens.

Students learning CSS who want to see how offset, blur, spread and inset change the rendered shadow.

Hand-writing layered shadows is easy to get wrong because the order, blur radius and spread radius all change the perceived depth. This generator keeps the visual preview and copied CSS in sync, so the shadow you tune is exactly the declaration you paste. Everything runs in your browser.

FAQ

Is this CSS box shadow generator free?

Yes. It is free to use with no sign-up, no download and no limit on generated shadows. Build a shadow, copy the CSS and paste it into any stylesheet.

Is my design uploaded anywhere?

No. The preview and CSS string are generated entirely in your browser with plain JavaScript. The colors, offsets and copied code do not need to leave your device.

How does the box-shadow syntax work?

A box-shadow layer uses horizontal offset, vertical offset, optional blur radius, optional spread radius, color and optional inset. Multiple layers are separated with commas, letting you combine soft depth, highlights and outline effects.

What does blur do in box-shadow?

Blur softens the shadow edge. A value of 0 creates a sharp edge, while larger values make the shadow wider and lighter. CSS does not allow negative blur values, so the generator clamps blur at 0 or higher.

What does spread do in box-shadow?

Spread expands or shrinks the shadow shape before blur is applied. Positive spread makes the shadow larger on all sides; negative spread tightens it, which is useful for soft shadows that should sit mostly below a card.

What does inset mean?

Inset changes an outer shadow into an inner shadow. It is clipped inside the element and makes the surface look pressed, recessed or beveled instead of lifted above the page.

Why can a large shadow overlap nearby content?

The box-shadow property paints outside the element but does not increase the element's layout size. Add margin or padding around the element when a blur or spread needs room to breathe.

Libreng CSS box-shadow generator