MasterTool

CSS Box Shadow Generator

Design a CSS box-shadow with offsets, blur, spread, colour and opacity, and copy the exact box-shadow declaration for your stylesheet.

Loading calculator…

What this tool does

Design a CSS box-shadow with offsets, blur, spread, colour and opacity, and copy the exact box-shadow declaration for your stylesheet. Single shadow layer with pixel lengths. Negative spread contracts the shadow (common for soft UI elevation). Blur cannot be negative in CSS and is rejected here too.

How to use the CSS Box Shadow Generator

  1. Enter or select horizontal offset (px).
  2. Enter or select vertical offset (px).
  3. Enter or select blur radius (px).
  4. Enter or select spread radius (px).
  5. Enter or select shadow colour (hex).
  6. Enter or select opacity (%).
  7. Enter or select shadow position.
  8. Read the calculated result; change any measurement to compare alternatives.

Formula

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <colour>; colour is emitted as rgba() when opacity is below 100%.
x
Horizontal offset (px)
y
Vertical offset (px)
blur
Blur radius (px)
spread
Spread radius (px)
color
Shadow colour (hex)
opacity
Opacity (%)
inset
Shadow position

Single shadow layer with pixel lengths. Negative spread contracts the shadow (common for soft UI elevation). Blur cannot be negative in CSS and is rejected here too.

Worked example

For css box shadow generator, the following measurements illustrate the exact method: Horizontal offset (px): 0; Vertical offset (px): 10; Blur radius (px): 25; Spread radius (px): -5; Shadow colour (hex): #000000; Opacity (%): 25; Shadow position: outset.

Inputs

  • Horizontal offset (px)0
  • Vertical offset (px)10
  • Blur radius (px)25
  • Spread radius (px)-5
  • Shadow colour (hex)#000000
  • Opacity (%)25
  • Shadow positionOuter (drop shadow)

Result

  • CSSbox-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.25);

Results explained

CSS
CSS from the formula above. Single shadow layer with pixel lengths. Negative spread contracts the shadow (common for soft UI elevation). Blur cannot be negative in CSS and is rejected here too.

Frequently asked questions

In order: horizontal offset, vertical offset, blur radius and spread radius. Offsets move the shadow, blur softens it, and spread grows or shrinks it before blurring — negative spread is the trick behind natural-looking card shadows.

An inner shadow drawn inside the element's border instead of outside it, giving a pressed or recessed look. It uses the same lengths with the 'inset' keyword.

Opacity below 100% is emitted as an alpha channel (rgba(red, green, blue, alpha)) because hex-with-alpha is less widely understood. At 100% the plain hex colour is emitted.

Separate shadow definitions with commas in one box-shadow declaration. Generate each layer here and join them — layered shadows look more realistic than one heavy blur.

No. Shadows are purely visual: they do not take up space, do not trigger scrollbars (in most cases) and are ignored by screen readers — never use a shadow as the only indicator of state.