Box Shadow Generator

The Box Shadow Generator turns the CSS box-shadow syntax into something you can see while you tune it. Drag the X and Y offset sliders, pick a color, set the opacity, and the preview block reflects every change in the same frame. Stack as many layers as you need — that's how real designers build elevation, with one tight inner shadow and one soft outer one — and toggle the inset flag per layer. When the shadow looks right, copy the CSS declaration with one click. No Figma plugin, no Tailwind config, no Adobe sign-in. Six presets cover the patterns you'll use 80% of the time: subtle, medium, large, brutalist, glow, inset.

Built by Bob QA by Ben Shipped May 15, 2026

Tool widget not found for slug: box-shadow-generator

The tool content is available above. The interactive widget will be added soon.

How to use

1
Pick a preset to start, or tweak from the Medium default. Subtle is a card. Brutalist is a hard offset, no blur. Glow is a colored, blurred, spread-out shadow.
2
Drag the X and Y offset sliders. X is horizontal (positive = right). Y is vertical (positive = down).
3
Drag the Blur slider to soften the edges. 0 = sharp pixel-perfect edge. 20+ = diffused like ambient light.
4
Use the Spread slider to expand or contract the shadow before it blurs. Negative spread is how designers create that 'tight at the surface, soft underneath' elevation feel.
5
Pick a color and an opacity. Most card shadows are black at 8-12% — pure black at 100% looks heavy and dated.
6
Tap 'Add layer' to stack a second shadow. Stack a tight 1px-blur and a soft 8px-blur and you have a Material-style elevation.
7
Toggle the Inset checkbox per layer if you want the shadow rendered inside the element — useful for sunken inputs, pressed-button states, and recessed surfaces.
8
Hit Copy. The CSS is on your clipboard, ready to paste into your stylesheet or any tool that accepts a box-shadow value.

🌈 Gradient Generator 🎬 CSS Animation Generator 🎨 Hex to RGB Converter 🎨 Color Palette Generator

Frequently asked questions

What's the difference between blur and spread?

Blur is how soft the edge of the shadow is — it's the radius over which the shadow fades to transparent. Spread is how big the shadow is before the blur starts — positive spread makes the shadow larger than the element, negative spread makes it smaller. The Material Design elevation system uses negative spread with positive blur to make shadows that look like they come from a light source above and to the side.

Why do my shadows look harsh?

Three common reasons. (1) Opacity is too high — try 0.08 to 0.15 instead of the default 0.5 most generators ship with. (2) Color is pure black — real-world shadows tilt slightly toward the surface color underneath, but for screen design dropping opacity is the easier fix. (3) Only one layer — most polished shadows stack two: a tight one for the surface contact, a softer one for the ambient diffusion.

What does the inset flag do?

Inset moves the shadow inside the element instead of outside. The same offset/blur/spread/color rules apply, but the shadow renders within the element's border-box. Use it for sunken inputs, pressed-button states, the inside of a pill where you want to suggest depth, or to add subtle texture to a card without using a background image.

How many shadow layers can I stack?

CSS itself has no limit. Browsers will render whatever you throw at them, though each layer adds a small paint cost. For UI design, 1-3 layers covers almost every elevation level. Beyond 4 layers you're usually creating an effect (neon, neumorphism) rather than depth — those tools have their own dedicated generators.

Why are my shadows clipped on one side?

The parent element has overflow: hidden somewhere up the tree. The shadow renders outside the element's box, so it can be cut off by any ancestor with overflow constraints. Common culprits: a card inside a container with rounded corners and overflow: hidden to clip the image; a flex column with a min-height and overflow set. Fix by adding padding to the parent so the shadow has somewhere to render, or by moving the shadow to the parent.

Does box-shadow affect element size or layout?

No. box-shadow is purely visual — it renders outside the box but doesn't add to the element's width, height, or affect the position of sibling elements. That's different from border, which does add to the box-model size unless box-sizing: border-box is set. If a shadow is overlapping a neighboring element and you want space, add margin to the element.

What's the performance cost of a complex box-shadow?

On modern hardware, negligible for static elements — the browser composites the shadow onto the same layer as the element. Where it matters: animating box-shadow itself (changing blur or spread on hover) forces a repaint each frame and can stutter on slow devices. The trick designers use: animate opacity on a stacked pseudo-element that has the bigger shadow, instead of animating the shadow values themselves. The result looks the same and runs at 60fps.

Can I use this shadow on Tailwind, Bootstrap, or styled-components?

Yes. The output is plain CSS — copy the box-shadow value and paste it into any system that accepts a CSS rule. In Tailwind, drop the value into a shadow- arbitrary value class like shadow-[0_4px_6px_-1px_rgb(0_0_0_/_0.1)]. In styled-components, paste it inside a template literal. In Bootstrap, override .shadow with the generated value in your custom CSS.

Will the same shadow look the same in every browser?

Almost. box-shadow has been stable across Chrome, Firefox, Safari, and Edge for over a decade — the rendering matches to within a pixel on standard offsets. The one place to watch: very large spread values combined with very large blur can render slightly differently in older Safari versions. Stick to spread under 20px and blur under 50px for the most consistent results across browsers.

Ratings & Reviews

Rate this tool

Loading reviews…

Box Shadow Generator

How to use

Related tools

Frequently asked questions

Ratings & Reviews

Rate this tool