Box Shadow Generator

CSS box shadow syntax

Every shadow this tool produces follows the standard property. Only the two offsets are required; everything else has a sensible default.

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

• offset-xMoves the shadow horizontally. Positive is right, negative is left, 0 keeps it centred.
• offset-yMoves the shadow vertically. Positive is down, negative is up. Most interface shadows use a positive value, because light usually comes from above.
• blur-radiusHow far the edge fades. 0 is a hard edge; larger values are softer. Cannot be negative.
• spread-radiusGrows or shrinks the shadow before blurring. Negative values pull it in, which stops a large soft shadow leaking out sideways.
• colorAny CSS colour. A low-opacity black blends with whatever is behind the element; a solid grey only looks right on one background.
• insetOptional keyword, written first. Draws the shadow inside the border box so the element looks recessed.

For more than one shadow, separate them with commas. The first one in the list is painted on top:

box-shadow:
  0 4px 6px rgba(0, 0, 0, 0.1),
  0 10px 20px rgba(0, 0, 0, 0.08);

Shadow recipes

Starting points worth knowing by heart. Every one of these is reproducible in the controls above — they are the same values the presets load.

Working with CSS box shadows

What is a CSS box shadow?

A box shadow is a shadow painted around — or inside — an element's border box using the box-shadow property. It follows the shape of that box exactly, including any border-radius, so a pill-shaped button automatically casts a pill-shaped shadow with no extra work.

The single most useful thing to know about it is that a shadow occupies no space. It is painted outside the layout flow, so adding one never resizes the element, never pushes its neighbours around and never triggers a reflow. That is the fundamental difference between a shadow and a border, and it is why shadows are the safe way to add depth to a layout that is already working.

Because shadows are painted rather than laid out, they can also overlap each other and the elements around them. That is what makes multi-layer shadows possible, and it is also why a shadow with a very large blur can bleed further across the page than you expected.

What is a box shadow generator?

A box shadow generator is a visual editor for one CSS property. Instead of typing five numbers, reloading and squinting at the result, you move controls and watch the shadow change immediately. When it looks right, you copy the CSS.

The value of doing it visually is not that the syntax is hard — it is not. It is that the relationship between the numbers and the result is genuinely difficult to hold in your head. The difference between 0 4px 8px and 0 8px 16px is obvious once you see them side by side and almost impossible to predict from the digits alone. Shadow design is an eye problem, not a maths problem.

This particular generator adds a few things beyond the usual four sliders: independent X and Y offsets including negative values, unlimited-order stacking of up to twelve layers, inset support, a switchable preview background, and output either as a plain rule or as a reusable CSS custom property.

How to use this generator

1. Drag the Y offset until the element sits at about the height you want it to appear.
2. Raise the blur until the edge stops looking like a duplicate of the box. A useful starting ratio is a blur roughly two to three times the offset.
3. Drop the opacity until the shadow stops competing with your content. Most interface shadows live between 8% and 20%.
4. Add a second layer if it still looks flat — real objects cast more than one shadow.
5. Switch the stage background to dark and check the shadow still reads there.
6. Press Copy CSS.

Understanding offset-x

The horizontal offset moves the shadow left or right. Positive values push it right, negative values push it left, and zero leaves it centred beneath the element.

In practice, most user-interface shadows use an X offset of exactly zero. That is not a convention for its own sake: overhead lighting, which is what interfaces implicitly simulate, casts shadows straight down. A horizontal offset implies a light source off to one side, which is a deliberate stylistic choice rather than a default. When you do want it, keep it small — beyond about 8px it starts to look like the element is falling over.

The old version of this tool could not express an X offset different from Y at all, which meant every shadow it produced was a 45-degree diagonal. That is worth stating plainly because it is exactly the kind of limitation that is easy to miss: the tool worked, it just could not make the shadow almost everyone actually wants.

Understanding offset-y

The vertical offset is the one that carries the illusion. It moves the shadow down (positive) or up (negative), and the distance reads directly as height above the page.

A 2px offset says "this is resting on the surface". A 24px offset says "this is floating well above it". Modals and dropdowns use large offsets because they genuinely are above everything; buttons use tiny ones because they are not. Getting this number wrong is the most common reason a shadow feels off even when every other value is reasonable.

Negative Y offsets — shadows cast upward — are unusual but not wrong. They suit elements anchored to the bottom of the viewport, such as a sticky action bar, where the light logically comes from the content above.

Understanding blur-radius

Blur controls how quickly the shadow fades out at its edge. At zero you get a hard-edged duplicate of the element's silhouette. As it increases, the edge softens and the shadow spreads outward.

The number that matters is not the blur on its own but its ratio to the offset. A large offset with little blur reads as a sticker sitting on the page; a small offset with a large blur reads as something barely lifted. Somewhere around two to three times the offset is where most natural-looking shadows sit.

Blur cannot be negative — the browser will reject the declaration. If you want a shadow smaller than the element, that is what spread is for.

Understanding spread-radius

Spread grows or shrinks the shadow before the blur is applied. A spread of 4px makes the shadow 4px larger than the element on every side; a spread of -4px pulls it in by the same amount.

Negative spread is the more useful of the two and the more commonly overlooked. When you use a large blur to get a soft shadow, the blur pushes the shadow out sideways as well as down, and the element ends up sitting in a grey halo. Pulling the spread in by a few pixels removes the sideways bleed while leaving the downward softness intact. That is why so many good card shadows look like 0 8px 24px -4px rather than 0 8px 24px.

Positive spread with zero blur and zero offset gives you something else entirely: a solid outline that follows the border radius. It is a useful trick for focus rings, because unlike a border it does not affect layout.

Understanding shadow colour

The most common mistake in shadow design is using a solid grey. A grey shadow only looks correct on one background colour; put the same element on a tinted panel and the shadow reads as a dirty smudge, because it is not transparent and therefore cannot pick up what is behind it.

Use a low-opacity black instead. rgba(0, 0, 0, 0.15) looks like a shadow on white, on grey, on a coloured card and on a photograph, because it darkens whatever is underneath rather than replacing it.

Tinting the shadow towards the hue of the surface it falls on is a refinement worth knowing. A shadow on a warm cream page looks better as a very dark brown than a pure black; on a deep blue interface, a dark navy shadow reads more naturally. Keep the opacity low and the effect is subtle but real.

This generator emits plain hex when opacity is 100% and rgba() below it. Both are valid CSS; the hex form is simply shorter when there is no transparency to express.

How inset shadows work

The inset keyword flips the shadow inside the element's border box. Instead of the element appearing to sit above the page, it appears to be cut into it.

The mental model stays the same: offset, blur and spread behave exactly as before, they are just applied to the inside of the box. An inset shadow with a positive Y offset darkens the top inside edge, because that is where the rim of the recess would block the light.

Inset shadows suit text inputs, progress tracks, wells and pressed button states. They are also the standard way to build a "pressed" affordance: swap the outer shadow for an inset one on :active and the button genuinely feels like it moves.

One limitation worth knowing: inset shadows are clipped by the element's border box, so they never extend beyond it. You cannot use inset to draw anything outside the element.

How multiple box shadows work

Separate shadows with commas and the browser paints all of them, first in the list on top. This is the single biggest step up in shadow quality available, and it costs nothing.

The reason it works is that real objects do not cast one shadow. There is a tight, dark contact shadow immediately beneath the object where it meets the surface, and a much wider, fainter ambient shadow from diffuse light in the room. Simulating both is what makes a card look like an object rather than a rectangle with a grey blob under it.

A practical two-layer recipe: a small tight shadow at low blur for contact, then a large soft one with negative spread for ambience. Three layers, as used in Material Design's elevation scale, adds a middle term and buys a little more realism at the cost of a longer declaration.

Because the layers paint in order, moving one changes the result. There is no way to remove a single layer from an existing multi-layer value in CSS either — box-shadow is one property, so overriding it means rewriting the whole declaration. That is a good argument for storing shadows in custom properties.

CSS shadow best practices

• Build an elevation scale, not one-off shadows. Three or four defined levels used consistently will look more coherent than a bespoke shadow on every component.
• Store them in custom properties. --shadow-sm through --shadow-xl makes the scale enforceable and lets you retune everything from one place. Switch on CSS Variable Mode above to get that form directly.
• Keep the light source consistent. If one component casts its shadow downward and another to the upper-left, the interface reads as physically incoherent even if nobody can say why.
• Check both themes. A shadow tuned on white frequently disappears on a dark surface. Dark interfaces often need a lighter inset rim rather than a darker drop shadow.
• Do not use shadows to signal state on their own. A shadow change is invisible to a screen reader and easy to miss for low-vision users. Pair it with a colour, an outline or a label.
• Prefer opacity over darkness. Reaching for a heavier grey is usually the wrong move; a lower-opacity black with a wider blur almost always looks better.

Common box shadow mistakes

• Solid grey instead of transparent black. Looks acceptable on white and wrong everywhere else.
• Blur too small for the offset. Produces a hard duplicate of the element that reads as a printing error rather than depth.
• Forgetting negative spread on large blurs. The shadow bleeds sideways and the element floats in a grey halo.
• One shadow where two are needed. A single blob rarely looks like real light.
• Opacity far too high. Anything above about 30% starts to compete with your actual content.
• Animating box-shadow on hover across a long list. Each frame repaints the shadow; on low-end devices this is visibly expensive.
• Adding vendor prefixes. -webkit-box-shadow and -moz-box-shadow have been unnecessary for over a decade and only add bytes.
• Using box-shadow on a transparent image. It follows the rectangular border box, not the artwork. Use filter: drop-shadow() for that.

Browser compatibility

box-shadow is supported unprefixed in every browser in current use, and has been for well over a decade. That includes multiple comma-separated shadows, the inset keyword, negative spread and rgba() colours — there is no meaningful compatibility question left to answer for any of them.

This tool therefore emits modern, standard CSS only. It does not generate -webkit-box-shadow or -moz-box-shadow, because those prefixes target browsers that no longer exist and adding them makes stylesheets larger without making anything work.

The one genuine consideration is performance rather than support. Very large blur radii are expensive to paint, and a page with a 60px blur on every item of a long scrolling list can drop frames on low-end mobile hardware. This is not a reason to avoid shadows; it is a reason to be deliberate about how many large ones a single screen carries.

Frequently asked questions

Related tools

Other ToolAdda utilities that pair with front-end work.