How do I create a CSS box-shadow and copy the code?

Adjust the sliders for x and y offset, blur, spread, Color and Opacity, watching the live preview. Then press Copy in the CSS output. You can also start from Presets such as Soft, Glow or Material 8.

Can I stack multiple shadows on one element?

Yes. Press + Add another shadow layer to add more layers, then reorder them, Hide or Remove each one. The layers are joined with commas in a single box-shadow value.

How do I make an inset shadow?

Select a layer and turn on Inset shadow, or load the Inset preset. The output then includes the inset keyword for that layer.

Can I get a Tailwind class instead of plain CSS?

Yes. Besides the CSS declaration, the tool outputs a Tailwind arbitrary-value class in the form shadow-[...], with spaces replaced by underscores, ready to paste into your markup.

Is there an easier way to set the shadow position than the sliders?

Yes. Drag the preview box to move the active layer's shadow, and hold Shift for fine control. You can also change the Preview background and Box color to see how the shadow looks on your design.

Yes. Every tool is free to use, with no account and no credit card. The work runs on your device rather than on our servers, which is what keeps it free to run.

Does it work on mobile?

Yes. It runs in current mobile browsers on iOS and Android, with nothing to install.

🎨

Free CSS Box Shadow Generator

Visual builder for CSS box-shadow with live preview, multi-layer stacking, color picker, inset toggle, and one-click copy. Includes Material, neumorphism, and glow presets.

Runs in your browserNo sign-up, no pop-upsNo login requiredFree forever

Works offline once loaded

Preview background

Drag the box to position the active layer's shadow - hold Shift for fine control

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Presets

Box color

Border radius (16px)

x (0px)

y (4px)

blur (12px)

spread (0px)

Color

Opacity (15%)

Inset shadow

Common uses

Card UI ShadowsBuild elegant card shadows for dashboards, product grids, and dashboards.
Button Press EffectsBuild button shadows that mimic real-world depth and press states.
Neumorphism Soft UICreate the soft-UI neumorphism look with paired light + dark shadows.
Modal & Popover ShadowsCreate the elevated, floating feel for dialogs and dropdowns.
Glow & Focus Ring EffectsCreate glowing accent effects, focus rings, and neon-style highlights.

How It Works

The box-shadow generator is a fully client-side React tool — no server, no library. It maintains a list of shadow layer objects in state, assembles valid CSS box-shadow strings on every change using a hand-written rgba() formatter, and applies them directly to a preview element via React's style prop so the browser's own rendering engine draws the result instantly.

1
Layer parameters feed the formatter
Each shadow layer stores x/y offsets, blur, spread, a hex color, and an opacity value. On every change, a small shadowToCss function converts the hex color to RGB components with a regex, then assembles the rgba() string — for example, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Multiple layers are joined with commas.
2
The browser renders the live preview
The assembled string is assigned to the boxShadow style property of a div element directly in JSX. React updates the DOM attribute, and the browser's CSS engine paints the shadow immediately — there is no canvas or WebGL involved, just native CSS rendering.
3
Drag-to-position uses the Pointer Events API
Clicking and dragging the preview box calls setPointerCapture on the element, then tracks onPointerMove deltas to update the active layer's x and y offsets in real time. Holding Shift applies a 0.25x scale factor for fine-grained positioning.
4
Output is copied to the clipboard
The tool produces two output formats from the same layer data: a standard CSS box-shadow declaration, and a Tailwind arbitrary-value class (shadow-[...]) where spaces are replaced with underscores per Tailwind's syntax rules. One-click copy uses navigator.clipboard.writeText.