What does the spread value do?

Spread grows or shrinks the shadow before blur is applied. Positive values make the shadow larger than the element; negative values tuck it underneath.

What is an inset shadow?

Adding the inset keyword draws the shadow inside the element, which creates a pressed or recessed look.

Can I copy the generated CSS?

Yes. Click Copy CSS to put the code on your clipboard, or Download CSS to save a .css file. You can also edit the code by hand before copying.

Is anything uploaded to a server?

No. The CSS is generated in your browser from the settings you choose. The tool keeps working offline once the page has loaded.

Can I share my design?

Yes. The page address updates as you change settings, so the Share button copies a link that restores your exact configuration.

Box Shadow Generator

Get the depth of a card or button exactly right. Adjust each part of the box-shadow property with sliders and watch the preview update in real time.

Last updated: 2026-07-21 · Runs 100% in your browser

// controls

Presets

X offset0px

Y offset10px

Blur30px

Spread0px

Shadow color

Opacity35%

Inset

Box color

Live preview

Generated CSS

.box {
  background: #1c2320;
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.35);
}

// Example output

.box {
  background: #1c2320;
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.35);
}

// Features

▸X/Y offset, blur and spread sliders
▸Opacity control with rgba output
▸Inset shadows
▸Presets: Soft, Medium, Hard, Floating, Glow, Neon
▸Save favourite shadows locally

// How to use

01Adjust the controls on the left or pick a preset to start the Box Shadow Generator.
02Watch the live preview update instantly as you change each setting.
03Fine-tune the generated CSS by hand in the code panel if you like.
04Click Copy CSS or Download CSS, or Share to send a link to your design.

// FAQ

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.

Sponsored · Recommended developer deals

// Related tools

Text Shadow Generator

Create glowing, embossed or retro text effects with a live CSS text-shadow editor and copyable code.

CSS Neumorphism Generator

Create soft-UI neumorphic surfaces with flat, concave, convex and pressed shapes from a single base color.

CSS Card Generator

Generate content cards with background, border, radius, padding, shadow and hover-lift effects.