Horizontal offset (X)

8px

Vertical offset (Y)

8px

Blur

16px

Spread

0px

Opacity

25%

Shadow color Inner shadow (inset)

Preview

CSS

Everything runs in your browser — your settings are never uploaded.

Build the CSS shadow (`box-shadow`) for buttons, cards and inputs just by dragging a few sliders. You can adjust the horizontal offset (X), vertical offset (Y), blur, spread, shadow color and opacity, and a live preview shows exactly how the shadow lands as you edit. Push only the Y offset for a shadow that drops straight down, or set X and Y to 0 and raise the blur and spread for an even all-around glow — you build the exact look you want. Switch on inner shadow (inset) to create a recessed, pressed-in shadow inside the element. The output is ready to paste straight into your CSS — for example `box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.25);` — and copies with one click. You pick the shadow color with a native color picker and set its strength with the opacity slider, so anything from a soft subtle shadow to a hard bold one is a slider away. Everything runs in your browser: the settings you enter are never uploaded, stored, or sent to a server. No installation — it works entirely in the browser.

How to use

Drag the X / Y offset, blur and spread sliders to shape the shadow.
Pick the shadow color with the color picker and set its strength with the opacity slider. Turn on "Inner shadow (inset)" for a recessed shadow.
The generated CSS appears instantly on the right. Click "Copy" and paste it into the CSS for your element.

FAQ

Are my settings uploaded anywhere?

No. Code generation and the preview run entirely in your browser. The offsets, blur, color and other settings you choose are never uploaded, stored, or sent to a server — the tool is fully local.

Can it make inner (inset) shadows?

Yes. Turn on "Inner shadow (inset)" and the output is prefixed with `inset`, giving a recessed shadow inside the element. It's useful for pressed-in buttons and carved-out looks.

How do I drop a shadow only on one side (e.g. bottom)?

Set a larger positive vertical offset (Y) and keep the horizontal offset (X) at 0 so the shadow falls below the element. Use a negative spread to tighten the shadow's width for a more bottom-only look.

What do X, Y, blur and spread each mean?

X is the horizontal offset, Y is the vertical offset, blur is how soft the edge is (larger = softer), and spread is the size of the shadow itself (positive grows it, negative shrinks it). Combine them to build the shadow you want.

Can I use the generated CSS as-is?

Yes. The output is formatted as a CSS property, such as `box-shadow: ...;`, ready to paste into the rule for your element. Use the "Copy" button and paste it into your CSS.