What is a CSS box shadow generator?

A visual editor that builds the CSS box-shadow property for you. Drag sliders for offset, blur, spread, and color — the tool writes the box-shadow declaration and you paste it into your stylesheet. Faster than hand-tuning hex values and pixel offsets.

What properties can I adjust?

Horizontal offset (offset-x), vertical offset (offset-y), blur radius, spread radius, color, opacity, and the inset toggle. Every CSS box-shadow value is exposed as a slider or input.

Can I generate multiple stacked shadows?

Yes. CSS allows comma-separated shadow layers, and this generator lets you stack them. Use multiple layers for depth (e.g., a tight 1px shadow + a softer 16px shadow), like the elevations Tailwind, Material Design, and Apple HIG use.

Yes — Tailwind-style presets (shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner) plus an Inner Glow preset are included. Pick one, then tweak the values in the editor.

What does the spread value do?

Positive spread makes the shadow larger than the element. Negative spread makes it smaller (useful for crisp inner shadows). Zero means the shadow is the same size as the element.

How do I copy the generated CSS?

Click 'Copy CSS' to copy the full box-shadow declaration to your clipboard. The output is plain CSS — paste it directly into a .css file, a styled-component, a Tailwind arbitrary value, or any framework.

Inset vs outset shadows?

Outset (default) shadows fall outside the element — the standard 'card' look. Inset shadows fall inside the element — used for pressed buttons, neumorphic surfaces, and inner glow effects. Toggle inset on any layer.

CSS Box Shadow Generator

CSS box shadow generator — build, preview, and copy box-shadow CSS in real time. Includes Tailwind-style presets, multi-layer shadows, and inset support. Free.

Shadow Layers

Layer 1

Inset

Offset X5px

Offset Y5px

Blur20px

Spread0px

Opacity25%

Color#000000

CSS Output

box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.25);

Presets

Frequently asked questions

CSS Box Shadow Generator — Visual box-shadow Builder

Build any CSS box-shadow visually and copy the code. Adjust offset, blur, spread, color, opacity, and inset on the fly — see the result update in real time. Stack multiple shadow layers for depth (the same technique Tailwind and Apple HIG use). Includes one-click presets matching Tailwind's shadow-sm through shadow-2xl, plus shadow-inner and a colored Inner Glow preset.

Visual preview

Drag sliders for offset, blur, spread, and color and watch the shadow update live.

Multiple layers

Stack comma-separated shadow layers for elevation and depth — full CSS box-shadow syntax supported.

Tailwind presets

shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner — drop in and customize.

Copy CSS

One click copies the complete box-shadow declaration ready to paste into any stylesheet or framework.