Built-in toolFree · No signup

CSS Box Shadow Builder

Layer multiple box-shadows visually. Control horizontal/vertical offset, blur, spread, colour, and opacity per layer. Toggle inset, enable/disable layers individually, and copy production CSS.

Presets

Layers (2)

Shadow type

Horizontal offset (X)0px

Vertical offset (Y)8px

Blur radius24px

Spread radius-4px

Color

Opacity20%

CSS Output

box-shadow: 0px 8px 24px -4px rgba(0,0,0,0.20),             0px 2px 6px -1px rgba(0,0,0,0.12);

How to use

Pick a preset

Start from Soft lift, Hard drop, Glow, Neon, or Inset well — then customise from there.

Add layers

Click '+ Add' to stack multiple shadows. Enable or disable each layer with the checkbox.

Tune each layer

Select a layer to edit its offsets, blur, spread, colour, and opacity with sliders.

Copy CSS

Hit Copy CSS to get the complete box-shadow declaration, ready to paste into your stylesheet.

More CSS shadow & generator tools

From our directory of 30+ CSS tools.

Browse all →

generators

CSS Gradient

The ultimate CSS gradient generator with visual preview and code export.

#gradient#color#background

generators

Neumorphism.io

Generate soft-UI neumorphic CSS box-shadow styles interactively.

#neumorphism#box-shadow#soft-ui

generators

Glassmorphism CSS

Create frosted glass UI effects with backdrop-filter CSS code instantly.

#glassmorphism#backdrop-filter#blur

generators

CSS Clip-path Maker

Drag handles to create any clip-path shape and copy CSS instantly.

#clip-path#shapes#masking

generators

CSS Filter Generator

Build CSS filter chains visually and preview on any image in real time.

#filter#image#effects

generators

Fancy Border Radius

Generate organic blob shapes using CSS border-radius eight-value syntax.

#border-radius#shapes#blobs

Know a great CSS tool?

Submit it to the directory and help developers discover it.

Submit a tool →