CSS Box Shadow Generator

Shadows with offsets, blur, spread and colour.

Runs in your browser. Nothing is uploaded — your input is processed on this device and discarded when you close the tab.

CSS Box Shadow Generator

How to use this tool

  1. Set the horizontal and vertical offsets, blur and spread in pixels.
  2. Pick a colour and opacity, and choose outer or inset.
  3. Press Generate to preview the shadow and copy the CSS.

Worked example

With offsets 4 and 6, blur 12, spread 0, black at 0.25 opacity, the CSS is 'box-shadow: 4px 6px 12px 0px rgba(0, 0, 0, 0.25);'.

What this tool does not do / Limits

One shadow only: layered shadows (several comma-separated shadows) are not supported, and colour is entered with the browser colour picker, so only opaque hex colours can be picked before opacity is applied.

Frequently asked questions

What does spread do?

Spread grows or shrinks the shadow in all directions: positive values make it larger, negative values make it smaller, before blur softens it.

What is an inset shadow?

An inset shadow is drawn inside the box instead of outside it, which suits pressed-in or recessed looks.

Related tools

JSON Studio

Format, validate, minify, query and compare JSON in your browser, with precise line-and-column errors.

Live

Regex Tester

Test patterns against sample text with match highlighting, capture groups and a safe one-second timeout.

Live

Security Header and DNS Checker

Check HSTS, CSP and other security headers, TLS details, and DNS/email authentication records (SPF, DKIM, DMARC).

Live