CSS Box Shadow Generator

Design layered box shadows with offset, blur, spread, opacity and inset controls.

CSS

box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

Tailwind class

shadow-[0_8px_24px_rgba(0,0,0,0.15)]

Layers (1)

Layer 1 settings

X offset

Y offset

Blur

Spread

Shadow color

Opacity

InsetDraw the shadow inside the element.

Preview

Box color

Background

Border radius

Presets

How to use

Start from a preset or tweak the default shadow.
Adjust the X and Y offsets, blur, spread, color and opacity.
Add more layers for realistic depth, or toggle inset for inner shadows.
Copy the box-shadow declaration or the Tailwind class.

Frequently asked questions

What do blur and spread do?

Blur softens the shadow edge — larger values make it more diffuse. Spread grows (positive) or shrinks (negative) the shadow before the blur is applied.

Why use multiple shadow layers?

Real-world shadows combine a tight, darker contact shadow with a larger, softer ambient one. Stacking layers recreates that depth.

What does inset mean?

An inset shadow is drawn inside the element's border box, which is useful for pressed buttons and input fields.

CSS

CSS Gradient Generator

Build linear and radial gradients with multiple color stops and copy the CSS.

Image

Image Optimizer

Compress and convert PNG, JPG, WebP, AVIF, GIF and SVG images in your browser.

Text

Text Diff Checker

Compare two texts and see added, removed and changed lines with word-level highlights.