How to use the Box Shadow Generator
- Choose Box shadow or Text shadow, then start from a preset such as Layered (realistic) or Neumorphism.
- Select a layer and adjust X/Y offset, blur, spread, colour, opacity and inset with the sliders or number fields.
- Add, duplicate or delete layers — stacking several soft shadows gives the most natural depth.
- Change the preview background, card colour and radius to match your design, then click Copy CSS.
What is the CSS box-shadow property?
box-shadow draws one or more shadows around (or inside) an element’s border box. Each shadow is written as [inset] <x> <y> [blur] [spread] <colour>, and multiple shadows are separated by commas — the first one is painted on top. Shadows follow border-radius, don’t affect layout and don’t trigger scrollbars.
| Value | What it does |
|---|---|
| X / Y offset | Moves the shadow right/down (negative values go left/up). |
| Blur | Softens the edge; 0 gives a hard shadow. Can’t be negative. |
| Spread | Grows (positive) or shrinks (negative) the shadow before blurring. |
| Colour | Usually a dark colour at low opacity, e.g. rgba(15, 23, 42, 0.08). |
| inset | Draws the shadow inside the box — for pressed buttons and wells. |
Realistic, layered shadows
Real objects cast a crisp contact shadow plus a wide, soft ambient one. A single large shadow looks flat; several layers with doubling offsets and blur (1px, 2px, 4px, 8px, 16px…) and low opacity look natural — try the Layered preset. A negative spread on a big blurred layer (Elevated card) keeps the shadow under the card instead of leaking out the sides. Tint the shadow colour towards your background hue instead of pure black for a cleaner result.
Neumorphism, glows and focus rings
Neumorphism pairs a light shadow (top-left) and a dark shadow (bottom-right) on an element the same colour as its background. It looks soft but has very low contrast, so don’t rely on it alone to show buttons or state. A shadow with zero blur and a positive spread is a great focus ring that follows border-radius: 0 0 0 2px #fff, 0 0 0 4px #4f46e5.
text-shadow
text-shadow uses the same syntax minus spread and inset. Use it subtly for legibility on images, or stack layers for neon, outline and retro 3D effects (see the Text shadow presets). Keep body text shadow-free; it reduces sharpness.
Performance and Webflow tips
Large blurred shadows are cheap to show but expensive to animate. Instead of transitioning box-shadow on hover, put the hover shadow on a ::after pseudo-element and fade its opacity. In Webflow, add each layer in the Style panel under Effects → Box shadows (choose Outside or Inside) — the table under the CSS output lists the per-layer values, with spread labelled Size as in Webflow. Pair shadows with a background from the CSS Gradient Generator.
Tools that pair well with the Box Shadow Generator
- Color Converter — Paste any CSS colour — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
- Clamp Calculator — Enter a minimum and maximum size and the viewport range — get a zoom-friendly clamp() value with the maths explained, a live preview and a complete fluid type or space scale.
- CSS Minifier — Paste a stylesheet to shrink it instantly.
- Contrast Checker — Enter a text and background colour to get the exact WCAG contrast ratio, pass/fail for every level, an APCA score and one-click fixes that keep your hue.
Frequently asked questions
What is the difference between blur and spread in box-shadow?
How do I add a shadow on only one side?
0 8px 6px -6px rgba(0,0,0,.3) for a bottom-only shadow.Is box-shadow or filter: drop-shadow() better?
box-shadow follows the element’s box and radius and supports spread and inset. filter: drop-shadow() follows the actual visible shape, including transparent PNGs and SVGs, but has no spread or inset and can be heavier to render.