CSS Box Shadow Generator

Stack up to three shadows to get the soft, realistic depth used by modern interfaces: a wide diffuse shadow, a tighter contact shadow and an optional hairline. Every layer has offsets, blur, spread, colour, opacity and an inset switch, and the preview card shows the result against your own background colour.

CSS & Frontend Runs in your browser

Build a CSS Box Shadow

JavaScript is required. This tool runs in your browser, so please enable JavaScript to use it. The instructions below are still available.

Box colour

Background colour

Corner radius

Layer 1: X offset

Layer 1: Y offset

Layer 1: blur

Layer 1: spread

Layer 1: colour

Layer 1: opacity

Layer 1: inset

Add layer 2

Layer 2: X offset

Layer 2: Y offset

Layer 2: blur

Layer 2: spread

Layer 2: colour

Layer 2: opacity

Layer 2: inset

Add layer 3

How to Use the Box Shadow Generator

Set the box, background colour and corner radius to match your design.
Adjust layer 1: offsets, blur, spread, colour, opacity and inset.
Tick Add layer 2 or Add layer 3 for extra depth.
Copy the box-shadow declaration from the CSS box.

About This Tool

UI designers and front-end developers creating cards, modals, buttons and elevation scales, and learners who want to see how each box-shadow value changes the result.

Input: Shadow settings · Output: CSS box-shadow.

Features and Limitations

Features

Up to three layers combined into one declaration in the correct order.
Opacity is written as rgba() so you can keep one brand colour.
Inset shadows for pressed or recessed styles.
Preview against any background colour; values are applied with CSS properties, never raw HTML.

Limitations

Shadows are drawn by your browser; very large blur values can look slightly different between browsers and may affect scrolling performance on low-end devices.
This builds box-shadow only; text-shadow and filter: drop-shadow() (which follows transparent image shapes) are not generated.
Results are computed in your browser; nothing you enter is sent to a server.

Example

The default layers produce box-shadow: 0 18px 40px -12px rgba(15, 27, 61, 0.3), 0 4px 8px -2px rgba(15, 27, 61, 0.12);

Frequently Asked Questions

What is the difference between blur and spread?

Blur softens the shadow edge; spread grows (positive) or shrinks (negative) the shadow before it is blurred. A negative spread keeps a big blur from leaking out at the sides.

Why use several layers?

Real shadows have a soft ambient part and a darker contact part. Combining a wide light layer with a tight darker one looks more natural than one heavy shadow.

Do shadows affect layout?

No. box-shadow is painted outside (or inside, for inset) the box without changing its size or the space it takes.

Are shadows enough to show a button is focused?

No. Use a clear focus outline as well; a faint shadow can fail contrast requirements and disappears in Windows high-contrast mode.