Box Shadow Generator

Box Shadow Generator
Build layered box shadows with offsets, blur, spread, inset & opacity – then copy clean CSS.
Perfect for cards, buttons, modals, soft UI & neumorphism.
Base box Adjust radius & background
Shadow layers Use multiple layers for depth
Tip: Combine a large soft shadow + a smaller tight one for realistic depth.
Preview Drag opacity & tweak offsets to see changes instantly.
CSS output
Usage: apply to box-shadow for cards, buttons, panels & UI surfaces. Tip: avoid pure black – use low opacity & subtle blur for modern shadows.
Copied to clipboard

How to Use the Box Shadow Generator

The Box Shadow Generator helps you create smooth, modern shadows for cards, buttons, images, and UI components. Follow the steps below to design your shadow and copy the CSS instantly.

➤ 1. Adjust the Base Box

At the top of the tool, you can customize the main preview box:

  • Radius – Controls how rounded the corners are
  • Box Background – Changes the block’s color
  • Stage Background – Helps you test shadows on different surfaces

This makes it easy to preview shadows in your preferred design environment.

➤ 2. Add or Edit Shadow Layers

Every shadow effect is made up of one or more layers. Click “Add shadow layer” to create a new one.

Each layer includes:

  • Shadow Color – Choose the base color
  • X (px) – Horizontal offset
  • Y (px) – Vertical offset
  • Blur – Controls the softness of the shadow
  • Spread – Expands or tightens the shadow
  • Opacity – Control shadow transparency
  • Inset Toggle – Makes the shadow appear inside the element

Use multiple layers for depth. Example combo:

  • Layer 1 → Large soft shadow
  • Layer 2 → Smaller tight shadow

This creates a realistic, modern UI shadow.

➤ 3. Preview Your Shadow

As you adjust sliders and inputs, the preview updates in real time.

You can:

  • Change surfaces
  • Modify light direction
  • Balance multiple layers
  • Test subtle, soft UI effects

This helps you design pixel-perfect shadows without guesswork.