Coastal morning
Skip to content
Draftroom
See it with your project

Free Web & UX Tools

CSS Box-shadow Generator

Design and copy CSS box shadows with live offset, blur, spread, color, opacity, and inset controls.

What this tool does

The live surface and code output update together so the effect can be judged against the current theme.

Design and copy CSS box shadows with live offset, blur, spread, color, opacity, and inset controls.

The live surface and code output update together so the effect can be judged against the current theme.

Use the tool

Create a CSS box shadow

Adjust geometry, color, opacity, and inset state.

Shadow geometry

Horizontal0px
Vertical14px
Blur36px
Spread-12px
Opacity24%

Shadow preview

box-shadow: 0px 14px 36px -12px rgb(15 23 42 / 24%);

How to use it

Three quick steps

  1. 1Adjust geometry, color, opacity, and inset state.
  2. 2Copy the resulting box-shadow declaration.
  3. 3Verify the result in its real production context. Shadow appearance varies with background, element size, display, browser, and surrounding layers.

Worked example

Example: CSS Shadow Generator

Create a restrained elevation shadow for a light interface card.

Copy the resulting box-shadow declaration.

FAQ

Questions about the css shadow generator

Practical details about using the tool and understanding its result.

Keep working

Related tools

Web & UX Tools

CSS Border-radius Generator

Design uniform or independent corner radii and copy the resulting CSS.

Open tool
Color Tools

Gradient Generator

Build and copy a two-color linear gradient with an adjustable angle.

Open tool
Web & UX Tools

Tap-target Size Checker

Compare control dimensions and spacing against editable mobile touch-target guidance.

Open tool

From one asset to the whole workflow

Keep this decision connected to the work, feedback, and final approval.

Draftroom keeps projects, creative files, feedback, revisions, and approvals connected in one workspace.

See Draftroom with your project