What do offset, blur, and spread do?

Offset moves the shadow horizontally (X) and vertically (Y). Blur softens edges. Spread expands the shadow size. Together, they control shadow direction, softness, and intensity.

How do I create a floating card effect?

Use positive X and Y offsets with moderate blur (8-12px) and spread. Increase blur for softer shadows. Multiple shadows layered create depth.

Can I stack multiple shadows?

Yes. The generator supports multiple box-shadow values separated by commas. Build complex elevation systems by adding shadows with different blur and offset values.

What's the difference between spread and blur?

Blur softens shadow edges. Spread expands shadow size uniformly. Blur alone = soft edges; spread adds area without softening.

Is my design saved anywhere?

No. The tool runs entirely in your browser. Copy the CSS and use it immediately. Nothing is stored or sent online.

CSS Box Shadow Generator

Generate CSS box-shadow values with customizable offset, blur, spread, and color.

Offset Xpx

Offset Ypx

Blur Radiuspx

Spreadpx

Shadow Color

Opacity

Inset

Result

Shadow Value

0px 4px 6px -1px rgba(0, 0, 0, 0.1)

CSS Property

box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);

Tailwind Class

shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1)]

Related Tools

CSS Text Shadow

Generate text shadow CSS

Neumorphism Generator

Generate neumorphic shadows

About This Tool

The CSS Box Shadow Generator creates polished drop shadows, elevation effects, and layered shadows for cards, buttons, and containers. Web designers and frontend developers use it to craft professional UI components without writing shadow code manually.

Adjust offset (X, Y), blur radius, spread distance, and color with visual sliders. The tool generates production-ready CSS instantly and shows a live preview of your shadow on a sample box.

Perfect for prototyping material design shadows, card elevations, and hover effects. Runs completely in your browser—no sign-up, no data storage, and no external requests.