What do offset, blur and spread mean?

Offset X and Y move the shadow horizontally and vertically. Blur softens the edge — larger values are more diffuse. Spread grows or shrinks the shadow; negative spread pulls it inside the element's edges.

What does the inset option do?

Inset draws the shadow inside the element instead of outside, which is useful for pressed buttons, inner glows and inset card effects.

Is my data uploaded anywhere?

No — the box-shadow value is generated entirely in your browser and nothing is sent to a server.

How is the opacity slider applied to my colour?

The tool converts your hex colour to an rgba() value and uses the opacity slider as the alpha channel. A colour of #0f172a at 25% opacity becomes rgba(15, 23, 42, 0.25).

How do I create a soft material-style elevation shadow?

Use a small downward offset (Y around 8px), a generous blur (24px or more), a slightly negative spread and a low opacity such as 20–30%. This produces the diffuse drop shadow used by card and elevation systems.

Can I add more than one box-shadow to an element?

Yes. CSS lets you list several comma-separated shadows on one box-shadow property. Generate each layer here and join the values with commas to stack them.

Why does my inset shadow not appear?

Inset shadows render inside the element's padding box, so they can be hidden behind a solid background or child content. Make sure the element has enough padding and that the shadow colour contrasts with the background.

CSS Box Shadow Generator

CSS box-shadow generator

This tool builds a CSS box-shadow visually and gives you the exact value to paste into your stylesheet. It is for developers styling buttons, cards, modals and inputs who want a precise shadow without trial-and-error. The live preview shows the shadow on a sample box as you adjust each control.

How it works

The box-shadow property follows the order [inset] offset-x offset-y blur-radius spread-radius colour. The generator reads your sliders and assembles that string: offset X and Y position the shadow, blur softens its edge, and spread expands (positive) or contracts (negative) it. Your hex colour and opacity slider are combined into an rgba() value so the shadow can be semi-transparent, and ticking inset prepends the inset keyword to draw the shadow inside the element.

Example

With offset X = 0px, offset Y = 8px, blur = 24px, spread = -4px, colour #0f172a and opacity 25%, the tool outputs:

box-shadow: 0px 8px 24px -4px rgba(15, 23, 42, 0.25);

That is a soft, downward elevation shadow typical of cards. Tick inset and it becomes inset 0px 8px 24px -4px rgba(15, 23, 42, 0.25), an inner shadow instead.

Effect	Offset Y	Blur	Spread
Subtle card	4px	12px	0px
Floating elevation	8px	24px	-4px
Hard drop shadow	6px	0px	0px
Pressed (inset)	2px	6px	0px

The shadow value is generated locally in your browser — nothing is uploaded.