Saved
Design & color·Css

CSS Box Shadow Generator

Compose layered box shadows with blur, spread, offset, and inset toggles. Fully client-side — no account, uploads, or remote storage.

Added Apr 18, 2026 · Updated Apr 21, 2026

Input

Result

Enter a value for horizontal offset to see your result.

How it works

Generates a CSS box-shadow value from offset, blur, spread, color, and inset settings. The value can be copied directly into any stylesheet.

Step by step

  1. 01Set horizontal and vertical offsets (positive = right/down, negative = left/up).
  2. 02Increase blur radius for a softer shadow.
  3. 03Use spread to expand or shrink the shadow size.
  4. 04Choose a shadow colour — include an alpha value for transparency.
  5. 05Enable 'Inset' to place the shadow inside the element border.

Examples

Soft elevation shadow

A classic card elevation shadow: centred horizontally, dropping 4px, with a 12px blur and 25% opacity (all values include 'px' suffix).

Inputs

Horizontal offset:
0
Vertical offset:
4
Blur radius:
12
Spread radius:
0
Shadow color:
#00000040
Inset (inner shadow):
false

Result

CSS value:
0px 4px 12px 0px #00000040
Note: Colours with 8-digit hex include an alpha channel (last two digits), e.g. #00000040 = black at 25% opacity. You can layer multiple shadows by comma-separating them in your CSS.

Related guides

  • What Is CSS Box Shadow? A Complete Guide

    Learn how the CSS box-shadow property works, what each parameter controls, how to layer multiple shadows, and how to create common shadow effects for cards and.

Frequently asked questions

How do I make a shadow more transparent?

Use an 8-digit hex colour where the last two digits control opacity (00 = transparent, FF = opaque). For example, #00000040 is black at 25% opacity. Alternatively use rgba(), e.g. rgba(0,0,0,0.25).

Can I stack multiple shadows?

Yes — CSS box-shadow accepts multiple shadow values separated by commas. For example: box-shadow: 0 2px 4px #0002, 0 8px 24px #0001;