CSS Box Shadow Generator

Create layered CSS box shadows with a live preview. Adjust offsets, blur, spread, color and opacity, then copy the exact declaration used on the preview box.

Box Shadow Preview

Jolbox

Clear controls

Review inputs and results

Transparent methods

Understand the output

Works on any device

Mobile, tablet or desktop

How to Use the CSS Box Shadow Generator

Choose a preset or edit the layer controls. Set horizontal and vertical offsets, blur and spread in pixels, a HEX color, and opacity from 0% to 100%. Enable inset for an inner shadow. Add or remove layers and copy the generated CSS when the preview is ready.

CSS and Explanation

box-shadow: [inset] offset-x offset-y blur-radius spread-radius rgba(red, green, blue, alpha), …;
Alpha = opacity percentage / 100

Positive horizontal offsets move a shadow right and positive vertical offsets move it down. Blur cannot be negative; spread and offsets can be negative. Each layer becomes one comma-separated CSS shadow, with the first layer painted on top. Inset places a shadow inside the box. The preview and copy button use the same validated declaration.

Supports 1–10 layers, opaque three- or six-digit HEX colors with separate opacity, offsets/spread between −1,000 and 1,000 pixels and blur from 0 to 1,000 pixels. Shadows can be clipped by an ancestor’s overflow setting. This box-shadow property follows the element’s box rather than the transparent silhouette of an image. Rendering depends on the surrounding background and browser.

Worked Example

A horizontal offset of 0, vertical offset of 8, blur of 24, spread of 0, #142033 color and 18% opacity generate box-shadow: 0px 8px 24px 0px rgba(20, 32, 51, 0.18);. Add a second layer to combine a soft outer shadow with a sharper edge.

Frequently Asked Questions

What is the difference between blur and spread?

Blur softens the edge and cannot be negative. Spread grows or shrinks the shadow shape before blur; a negative spread pulls it inward.

Can offsets and spread be negative?

Yes. Negative horizontal and vertical offsets move left and up. Negative spread reduces shadow size. Blur must be zero or positive.

How are multiple layers combined?

Each layer is a separate shadow in a comma-separated list. The first listed layer appears on top. You can combine outer and inset layers in one declaration.

Why might my shadow look different on my site?

The background, box dimensions, border radius and parent overflow can change its appearance or clip it. Apply the copied declaration to your target element and check it in context.