CSS Box Shadow Generator

CSS shadow guide

A natural shadow comes from position, blur, spread, and opacity together

The CSS Box Shadow Generator helps you tune one or more shadow layers while watching the preview and the exact box-shadow rule at the same time. Horizontal and vertical offsets set the direction, blur and spread shape the edge, and opacity decides how heavy the shadow feels. There is no separate calculate button: the code updates as you move the controls.

Set the shadow values first, then check the target shape

The workflow is live editing. Keep the shadow values and the preview element settings separate so you know which values will be copied into CSS and which values are only there for preview.

Create a shadow layer in the Shadows tab. Tune horizontal offset, vertical offset, blur, spread, color, opacity, and inset state for each layer.
Add another layer only when it helps. Multiple layers become one comma-separated box-shadow value. Remove layers that are not doing real work.
Use the Preview tab to match the target element. Switch between square, rounded, circle, button, and card shapes so the preview resembles the element you will style.
Start from a preset, then adjust it. Soft, layered, neon, and inset presets are starting points. Check the final CSS box before you paste it into a stylesheet.

Offsets move the shadow, blur and spread change its texture

The names look similar, but each part of box-shadow does a different job. Treating blur and spread as the same value usually makes shadows look muddy or too sharp.

Horizontal and vertical offset

Positive values move the shadow right and down. Negative values move it left and up. Think of them as the direction of the light.

Blur

Blur softens the edge. A larger value usually makes the shadow wider and lighter.

Spread

Spread grows or shrinks the shadow area before blur is applied. Small negative spread can keep a card shadow light.

Color and opacity

The tool combines the color and opacity into an rgba() color. A black shadow at 0.2 opacity feels very different from the same color at 0.5.

Inset shadow

When inset is on, the shadow is drawn inside the element. It works well for pressed buttons, input fields, or recessed cards.

Preview shape and size

Shape and size only change the preview target. They are not included in the copied box-shadow rule.

The copied output follows the CSS box-shadow value order

The output is a CSS property value with optional inset, horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple layers are joined by commas and read by the browser as one box-shadow declaration.

Basic orderoffset-x offset-y blur spread color

Inset shadowinset 0px 4px 12px -4px rgba(…)

Multiple layersshadow A, shadow B, shadow C

Preview sizeA preview-only setting, not copied CSS

MDN box-shadow referenceUse it to confirm offsets, blur, spread, inset, and multiple-shadow syntax.CSS Borders and Box DecorationsUse it when you need the formal CSS definition for box shadows.

An inset example is easiest to read as one line of CSS

For example, inset on, 12px horizontal offset, 8px vertical offset, 18px blur, -2px spread, color #336699, and opacity 0.35 produces the value below. Negative spread keeps the shadow from becoming too large, while inset makes it feel pressed into the card.

Offsets12px / 8px

Blur · spread18px / -2px

Colorrgba(51, 102, 153, 0.35)

Resultinset 12px 8px 18px -2px …

A shadow does not take layout space

A box-shadow can appear outside the element, but it does not push nearby content away. If a parent has overflow: hidden or the card sits too close to the viewport edge, the shadow may be clipped.

Check the real background before you copy

A shadow can make a card clearer, but a heavy shadow can also make the page feel dirty. The same CSS value can look different on light and dark surfaces.

Start with more blur and less opacity. A wide, pale shadow often looks more natural than a dark compact one.
Use spread in small steps. Large positive spread can look like a border. Large negative spread can hide the shadow almost completely.
Keep layered shadows intentional. Two or three layers can add depth, but too many layers make the code harder to maintain.
Retune for dark surfaces. A black shadow that works on a light card may become a stain on a dark background.

Frequently asked questions

Does changing preview size change the CSS code?

No. Preview size and shape only change the element used for checking the effect. The copied code contains shadow offsets, blur, spread, color, and inset state.

How are multiple shadows applied?

The tool joins shadow layers with commas. CSS applies them as one shadow list, so check the preview and code together when the list gets longer.

What is the difference between blur and spread?

Blur softens the edge of the shadow. Spread changes the size of the shadow area. For soft card shadows, adjust blur first and keep spread small.

When should I use inset?

Use inset when the element should look pressed inward, such as an input field, a recessed card, or a pressed button. It is the opposite feeling from a floating card shadow.