CSS Box Shadow Generator

Build a box-shadow from as many as eight layers, aim them all at once with a light source you drag, and see the result on a card, a button or a photo, on a light, dark or custom background. Start from 44 presets, copy the code as CSS, a Tailwind class or a React style, and export a five-step elevation scale as CSS variables or Tailwind config. Everything runs in your browser. Nothing you type is sent to We.Inc or anyone else, and it is gone when you close the tab.

How it works

  1. Pick a preset to start, or edit the layer that is already there. Each layer has a horizontal (X) and vertical (Y) offset, blur, spread, colour, opacity and an inset switch. Type exact numbers or use the sliders.
  2. Add, duplicate, remove and reorder layers in the list. The first layer in the list is drawn on top, exactly as it is in the CSS.
  3. Drag the sun on the light pad to move the light. Every layer keeps its distance and turns to point away from the light, so a stacked shadow stays consistent. With the pad focused, the arrow keys move the light in 15 degree steps.
  4. Switch the preview between a card, a button and a photo, and between a light, dark or custom page colour. Change the element colour and corner radius to match your design.
  5. Copy the result as a CSS declaration, a Tailwind arbitrary-value class or a React style prop. The Share button copies a link that reopens this exact shadow.
  6. Scroll to the elevation scale to turn your shadow into five related levels (xs to xl) and copy them as CSS variables, a Tailwind v4 @theme block or a Tailwind v3 config.

Why layered shadows look more real

Light in a room rarely comes from one point. An object sitting on a desk casts a short, fairly sharp shadow right underneath it and a broad, faint one further out. A single box-shadow can only draw one of those, so it tends to look either like a hard sticker or a grey smudge. Stacking two to five layers, each with a larger offset and blur and a lower opacity than the one before, rebuilds that falloff. The Layered presets show the idea; the Five layer smooth preset doubles the offset and blur at each step with a constant low opacity.

Keep all layers pointing the same way. If one layer drops straight down and another drifts to the right, the element looks lit by two lamps. The light pad turns every layer at once, which keeps them aligned.

Choosing a shadow style for a website

Most business sites need only two or three shadow strengths: a faint one for cards that sit on the page, a stronger one for things that float above it such as menus and dialogs, and perhaps a lift on hover. The elevation scale gives you those as named levels so the whole site stays consistent.

The other styles are for character. Hard, unblurred shadows suit bold, playful or brutalist designs and stay crisp at any size. Glows work on dark pages where a normal shadow disappears. Coloured shadows, tinted to the button or card colour, make bright elements feel lit rather than dirty. Neumorphic shadows give a soft, moulded look but reduce how clearly edges show, so pair them with clear labels.

Using the code

The CSS output is a box-shadow declaration you can paste into any rule. The React output is a style prop. The Tailwind output is a single class that works in Tailwind v3 and v4 without touching the config. For design systems, the elevation scale export defines --shadow-xs to --shadow-xl as CSS custom properties; reference them with var(--shadow-md), or use the Tailwind v4 @theme version so classes like shadow-md and shadow-lg use your values instead of the defaults.

Tips

  • Two or three layers usually look more natural than one: a tight, darker layer close to the element and a wide, faint one further out.
  • A negative spread pulls a big blurred shadow in from the edges, so it reads as depth underneath the element rather than a grey halo around it.
  • Tint the shadow toward your page colour instead of pure black. A dark navy or warm brown at low opacity looks softer than black at the same strength.
  • On dark backgrounds a dark shadow barely shows. Use a lighter element colour, a 1px border, or a glow made from a light colour instead.
  • Neumorphic shadows only work when the element and the page share one colour, and they make edges hard to see. Keep them for decoration, not for buttons people must find.
  • Pick a small set of levels (the elevation scale) and use them everywhere, so a bigger shadow always means the same thing: closer, more important, or being dragged.

Frequently asked questions

How does the CSS box-shadow property work?

box-shadow takes a horizontal offset, a vertical offset, an optional blur radius, an optional spread and a colour, plus the optional inset keyword for an inner shadow. Example: box-shadow: 0 4px 12px -2px rgb(15 23 42 / 0.15). List several shadows separated by commas to stack them; the first one in the list is drawn on top.

What is the difference between blur and spread?

Blur softens the edge: 0 gives a hard edge and bigger values fade it out over a wider area. Spread grows or shrinks the shadow before it is blurred: a positive spread makes it larger than the element, a negative spread makes it smaller, which is how soft shadows avoid showing at the sides.

How do I use a box shadow in Tailwind CSS?

For a one-off shadow, copy the Tailwind output, which is an arbitrary-value class such as shadow-[0_4px_12px_-2px_rgb(15_23_42/0.15)]; spaces become underscores and layers stay separated by commas. For a shadow you reuse, export the elevation scale and add it to your theme so you can write shadow-md or shadow-lg.

How does the light source pad work?

Shadows fall away from the light. When you drag the sun, the tool keeps each layer's distance from the element (the length of its X and Y offset) and turns it to point directly away from the sun. Inset layers turn the other way, as an inner shadow does. Blur, spread, colour and opacity do not change.

How is the elevation scale made?

Your current shadow is the md level. The xs, sm, lg and xl levels multiply every offset, blur and spread by 0.25, 0.5, 1.75 and 3, and scale the opacity a little down for smaller levels and up for larger ones. It is a starting point; edit the values if one level looks off.

Are box shadows bad for performance?

A static shadow is cheap to draw. Cost grows with very large blur values on many elements and with animating box-shadow itself, which redraws on every frame. To animate a lift on hover, a common approach is to put the larger shadow on a pseudo-element and fade its opacity.

Do shadows matter for accessibility?

Shadows are decoration and do not have to meet contrast rules on their own. What matters is that text stays readable, that the edge of a button or field is still clear when the shadow is faint (a border helps), and that keyboard focus is shown with a visible outline rather than only a shadow change.

Is this box shadow generator free?

Yes, with no signup and no limit. It runs entirely in your browser, and the code it produces is yours to use in any project.

Related: CSS Button Generator, CSS Filter Generator, Color Palette Generator, Color Contrast Checker, Website builder.

Turn this result into your website or see the We.Inc website builder. The free plan gives you up to 3 template sites on a we.inc address, with no AI credits and no custom domain. Paid plans are Starter at $20 a month, Pro at $49 and Max at $99. See pricing.

More in Free Tools

Related guides

More on this topic

Product

Who It's For

Features

Resources

Company

View Sitemap