Skip to content
ToolzKit

Color & Design

CSS Box Shadow Generator

Layer multiple CSS box-shadows with adjustable offset, blur, spread, colour and inset.

Shadow layers

Preview

CSS

box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.35);

About the CSS Box Shadow Generator

Build layered CSS box-shadow effects by stacking multiple shadow layers, each with its own horizontal and vertical offset, blur radius, spread, colour, opacity and inset toggle. A live preview on a sample card shows exactly how the combined shadows will render before you copy the CSS.

How to use it

  1. 01Adjust the first shadow layer's offset, blur, spread, colour, alpha and inset toggle.
  2. 02Add more layers to build depth, such as a tight dark shadow plus a soft ambient one.
  3. 03Reorder layers with move up/down, or remove ones you don't need.
  4. 04Copy the generated box-shadow declaration into your stylesheet.

Features

  • Up to six independent shadow layers, each individually configurable.
  • Full control of x/y offset, blur, spread, colour, alpha and inset.
  • Reordering controls since layer order affects visual stacking.
  • Live preview on a sample element against a neutral background.

Practical examples

Material-style elevation

Combine a tight, dark, low-opacity shadow with a larger, softer, lighter one to mimic Material Design elevation.

Inset border effect

Use a single inset layer with a small offset and blur to create a subtle pressed-in look on a button.

Limitations

  • Offsets, blur and spread are limited to the ranges exposed by the sliders (-50 to 50 or 0 to 100); manual CSS editing is needed for more extreme values.
  • The preview element is a fixed-size sample box and does not reflect how the shadow looks against your actual page background.

Privacy

Shadow composition and preview rendering happen entirely client-side; nothing you enter leaves your browser.

Read the full privacy policy for how the site as a whole handles data.

Frequently asked questions

Why does layer order matter?

In CSS, the first box-shadow in the list renders on top, so reordering layers changes which shadow appears closest to the element.

How is alpha applied to the colour?

The colour and alpha slider are combined into an rgba() value in the final CSS, regardless of what format you typed the colour in.

Can I create an inset and outset shadow together?

Yes, add two layers and toggle inset on one of them; both will appear in the combined declaration.

Is there a limit on shadow layers?

Up to six layers are supported, which is more than enough for realistic elevation effects without harming render performance.