CSS Box Shadow Generator

Create the perfect CSS box shadow with sliders and a live preview. Adjust the position, blur, spread and colour, then copy the ready-made CSS for your stylesheet. Free, instant and private, with no sign-up needed.

Preview

Horizontal offset: 0px

Vertical offset: 8px

Blur radius: 24px

Spread: 0px

Shadow colour

Inset shadow

CSS code

How to Use

Move the sliders to set the shadow’s horizontal and vertical offset, blur radius and spread.
Pick a shadow colour, and tick Inset shadow for an inner shadow.
Preview the result live, then click Copy CSS and paste it into your stylesheet.

Key Features

Live preview – the shadow updates as you drag each slider.
Full control – offset, blur, spread, colour and inset in one place.
Ready-made CSS – a clean box-shadow declaration to paste anywhere.
100% private – everything runs in your browser; nothing is sent anywhere.

FAQs

Is this CSS box shadow generator free?

Yes. It is completely free with no sign-up and no limits.

What CSS does it output?

It outputs a standard box-shadow declaration, for example: box-shadow: 0px 8px 24px 0px #1E293B;. Paste it into any CSS rule.

What is an inset shadow?

An inset shadow is drawn inside the element’s border instead of outside it, which is handy for pressed-button or inner-glow effects.

Is my data stored anywhere?

No. The shadow is built entirely in your browser and nothing is transmitted or saved.