Tune a shadow by eye, get clean CSS to paste

This box shadow generator draws your shadow on a preview shape and writes the CSS as you go. Stack up to 8 shadows, adjust each one with sliders, and copy a tidy box-shadow declaration. Two more tabs do the same for text-shadow and filter: drop-shadow(). Everything runs in your browser and nothing is sent anywhere.

How to make a CSS shadow

Pick a tab: "box-shadow" for cards and buttons, "text-shadow" for headings, "filter: drop-shadow()" for logos and transparent images.
Set each shadow: "X offset (px)", "Y offset (px)", "Blur (px)", "Spread (px)", "Color" and "Opacity (%)". Tick "Inner (inset)" for a pressed-in look.
"Add a shadow" adds another layer. The ↑ and ↓ arrows reorder, × deletes, and unticking "On" removes a shadow from the code while keeping its settings.
Under "Shape and background", change the width, height, "Corner radius (px)" and colors, or switch to "Dark background".
Choose the color format (rgba() or "8-digit HEX"), tick "CSS variables" if you want them, then click "Copy code". "Copy link" keeps every setting in the URL.

Eight presets, from "Soft" to "Glow", give you a starting point.

The box-shadow property and its syntax

When the page first loads, the tool writes:

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

X offset: positive moves the shadow right, negative moves it left. Here 0.
Y offset: positive moves it down. Here 4px, as if the light came from above.
Blur: how wide the fade is. 0 gives a hard edge; it can't be negative.
Spread: grows the shadow (positive) or shrinks it (negative) before blurring. Left out, it's 0.
Color: here black at 15% opacity. As an 8-digit HEX the same color is #00000026: the last two digits hold the alpha, 38 out of 255.

The tool drops a zero spread, and a zero blur unless a spread follows: 0 0 0 2px #1f5fe0 keeps its zero blur, otherwise the 2px would be read as blur.

Multiple shadows and inset

Separate shadows with commas; the first one is painted on top. The "Layered" preset stacks five shadows of 1, 2, 4, 8 and 16 px at 7% each, which looks more natural than one big shadow. The inset keyword puts the shadow inside the box, like a sunken input field.

text-shadow and drop-shadow

text-shadow follows the letter shapes and has no spread or inset. filter: drop-shadow() shades the visible pixels: on an <img> with a transparent PNG, or on an SVG icon, the shadow hugs the artwork, while box-shadow shades the whole rectangle. The preview shows both stars side by side.

Good practice

One light source. Keep the offset pointing the same way across the whole site, usually down.
Soft, consistent shadows. 10 to 25% opacity is often enough. Define two or three elevation levels and reuse them; the "CSS variables" option writes --shadow-1, --shadow-2 and so on.
Performance. Animating very large blurred shadows can feel sluggish on low-end phones, so consider fading the opacity of a fixed shadow instead.
Accessibility. A shadow is not a substitute for contrast: buttons and form fields should stay visible without it, thanks to a border or a strong enough background color.

Frequently asked questions

Why can't I see my shadow?

Check the opacity, the "On" box and the page color: black at 10% almost vanishes on a dark background, where a stronger shadow or a light glow works better. A parent with overflow: hidden also clips any shadow that sticks out.

rgba or 8-digit HEX: which should I use?

The browser treats them the same: rgba(0, 0, 0, 0.25) and #00000040 are the same black at 25%. Match your stylesheet.

How do I get a neumorphism effect?

You need two opposite shadows on a shape the same color as the page. The preset sets both to #e4e9f0, with a dark shadow to the bottom right (8px 8px) and a white one to the top left (-8px -8px). Contrast stays low, so keep it for decoration.

Are my settings saved?

Your last settings stay in your browser. To open them on another device, use "Copy link".

CSS Box Shadow Generator

Shadows

Shape and background

CSS code

Recently used