CSS Box Shadow Generator

About Box Shadow Generator

A shadow written as four numbers and a colour tells you nothing until you see it, so the box below is drawn with exactly the declaration underneath it — on a surface colour you choose, because a shadow only exists relative to what it falls on.

The layers control is the part worth understanding. A single box-shadow describes a light source that does not exist: one distance, one blur, one opacity, falling off nowhere. Real shadows accumulate — a tight dark contact shadow where the object meets the surface, then progressively larger and fainter ones further out. Set layers to two or three and each copy is placed at twice the distance and roughly two-thirds the opacity of the one before, which is the arrangement every design system's elevation scale is a hand-tuned version of.

Spread is the least used and most useful of the four numbers. A negative spread pulls the shadow in before blurring it, so the shadow sits under the element rather than haloing around it — which is the difference between a card that looks lifted and one that looks like it is glowing.

For a shadow that follows a shape rather than a box — a transparent PNG, an icon, a clipped element — filter: drop-shadow() is the property, and it is given here whenever the shadow is a single non-inset layer. It has no spread and cannot be inset, which are the two things it trades away.

Where it helps

• The preview is drawn with the exact declaration shown, on a surface colour you control — which is the only way a shadow can be judged.
• Builds multi-layer shadows the way design systems do, instead of leaving you to hand-tune three copies.
• Gives the filter: drop-shadow() equivalent where one exists, for shadows that have to follow a shape rather than a box.
• Separates the colour from its opacity, so a tinted shadow is one control rather than an rgba() typed by hand.
• Covers inset, which is what most generators leave out and what every pressed control needs.
• Runs entirely in your browser.

Limits

• One shadow definition at a time. Combining an inset and an outer shadow on the same element means pasting two declarations together.
• Large blurs are expensive to paint, especially on a scrolling list or an animated element, and nothing here measures that cost.
• The shadow colour is a flat tint. Physically accurate shadows take a hue from the surface they fall on, which no box-shadow can express.
• box-shadow always follows the border box, so an element clipped by clip-path will cast a shadow in the shape of its rectangle.
• Shadows carry almost no contrast, so they cannot be the only signal that something is interactive or elevated.

Frequently asked questions

What does spread actually do?

It grows or shrinks the shadow before it is blurred. A positive spread makes the shadow larger than the box, which reads as a glow or a ring; a negative one pulls it in, so the blur stays under the element instead of leaking out around it. Negative spread is what makes a modern card shadow look tight rather than hazy.

Why do design systems use several shadows for one elevation?

Because a real shadow is not one shape. Light from an area source produces a dark contact shadow close to the object and a soft, wide one further out, and a single box-shadow can only be one of the two. Stacking two or three at increasing distance and decreasing opacity approximates the falloff.

When should I use filter: drop-shadow() instead?

When the shadow has to follow the element's actual shape — a transparent PNG, an SVG icon, anything with clip-path or border-radius on a child. box-shadow only ever knows about the border box. The trade is that drop-shadow has no spread, cannot be inset, and creates a new rendering layer.

Do shadows work on a dark interface?

Barely. A dark shadow on a dark surface is nearly invisible, which is why dark themes generally signal elevation with a lighter surface colour instead, sometimes with a subtle light-coloured inset shadow along the top edge to suggest a highlight.

Related tools

• Border Radius Generator — Round corners evenly, one by one, or into a blob
• Gradient Generator — Build linear, radial and conic CSS gradients
• Contrast Checker — WCAG contrast ratio for text and UI colours
• CSS Animation Generator — Build a keyframe animation and watch it run
• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Image Colour Picker — Pick a colour out of a picture and read it back

More Colors & Design tools

• Color Converter — Convert between hex, RGB, HSL, HWB, LAB, OKLCH and more
• Contrast Checker — WCAG contrast ratio for text and UI colours
• Image Colour Picker — Pick a colour out of a picture and read it back
• Gradient Generator — Build linear, radial and conic CSS gradients
• Random Colour Generator — Random colours from a seed you can keep, in a range you choose
• Palette Generator — Harmonious colour schemes from a base colour
• Border Radius Generator — Round corners evenly, one by one, or into a blob
• CSS Animation Generator — Build a keyframe animation and watch it run
• Cubic Bezier Editor — Plot an easing curve and feel what it does
• Color Scale Generator — Turn one colour into an even 50–950 shade scale for CSS, Tailwind or SCSS
• Color Mixer — Blend two colours in OKLCH, OKLab or sRGB and get the CSS color-mix() for it
• Color Name Finder — The nearest CSS colour names to any colour, and a plain-words description
• Color Blindness Simulator — See a palette as people with each colour-vision deficiency do, and find the pairs that clash
• Image Palette Extractor — Pull the dominant colours out of a picture, with how much of it each covers
• Type Scale Generator — A modular type scale, fixed or fluid with clamp(), ready as CSS variables
• Text Shadow Generator — Soft, glow, neon, outline and retro text shadows with a live preview
• Glassmorphism Generator — Frosted-glass panels with backdrop-filter, a fallback and a live preview
• Clip Path Generator — Cut elements into triangles, hexagons, stars, arrows or your own polygon
• CSS Filter Generator — Build a CSS filter by eye, or find the filter that turns a black icon into any colour
• Design Tokens Converter — Turn W3C or Style Dictionary tokens into CSS variables, SCSS, Tailwind or JS
• Web Font Previewer — Set your own text in a font file before you ship it