utilyfe

CSS Box Shadow Generator

Build a shadow by eye, stack layers, tweak blur and spread, then copy the CSS or a Tailwind class.

Runs entirely in your browser. Nothing you enter is uploaded or stored.

Start from a preset

Preview only (these don't change the CSS)

Background

Box colour

Corner radius

px

Shadows

  • Shadow 1

    Horizontal offset

    px

    Vertical offset

    px

    Blur

    px

    Spread

    px

    Colour

    Opacity

    %
  • Shadow 2

    Horizontal offset

    px

    Vertical offset

    px

    Blur

    px

    Spread

    px

    Colour

    Opacity

    %

Code

Also try:CSS Gradient GeneratorHex to RGB ConverterColor Contrast Checker

How to use the CSS Box Shadow Generator

  1. 1Pick a preset to start from, or change the default one.
  2. 2Adjust each shadow's horizontal and vertical offset, blur, spread, colour and opacity. Tick Inset for a shadow inside the box.
  3. 3Add more shadows to layer them (up to six) and use the preview settings to see them on your own background and box colour.
  4. 4Copy the CSS, or switch to Tailwind class and copy that instead.

What each number does

A box shadow is described by up to five things, always in the same order: horizontal offset, vertical offset, blur, spread and colour. The offsets slide the shadow across and down from the box, and a negative number slides it the other way. Blur softens the edge, and spread grows or shrinks the shadow before the blur is applied. The colour carries the shadow’s opacity, which is why shadows are almost always written with rgba(): a solid black shadow is rarely what you want. The generator always writes all four numbers so the meaning of each is clear, using a bare 0 where a value is zero.

Blur and spread are different

They’re easy to mix up, because both make a shadow look bigger. Spread changes the shadow’s actual size, with an edge that stays sharp until you add blur. Blur leaves the size alone and fades the edge instead. A shadow with a blur of zero and a spread of 10px is a solid slab 10px larger than the box on every side. A shadow with a large blur and a small negative spread is soft and stays close underneath: the standard recipe for a card that appears to float just above the page.

Layering shadows

One shadow is a single flat gradient of darkness; real light doesn’t behave like that. Close to an object a shadow is small and sharp, and farther away it spreads out and fades. Stacking several shadows, each with a bigger offset and blur and a low opacity, reproduces that falloff much more convincingly than cranking up one shadow. The first shadow in the list is drawn on top of the ones after it. The presets include a two-layer card shadow and a five-layer stack so you can see how the layers add up, and each layer can be adjusted or removed on its own.

Inset shadows

Ticking Inset moves a shadow inside the box. It’s painted along the inner edge, above the background but beneath the content, so it reads as a recess. Inset shadows are how pressed buttons, text fields and sunken panels are usually drawn, and they can be combined with ordinary outer shadows in the same list: the Pressed preset does exactly that.

Box-shadow or drop-shadow

box-shadow traces the element’s rectangle, rounded by its border-radius, regardless of what’s inside it. If you put it on an icon with a transparent background you get a shadow of the whole square, not of the icon. The drop-shadow() filter traces the visible shape instead, so it’s the right choice for transparent images and SVG. The trade-off is that it can’t do spread or inset. For everyday interface elements (cards, buttons, panels, dialogs) box-shadow is the one to use.

Using the code

Copy the CSS into a rule, or switch to the Tailwind class to paste an arbitrary-value utility straight onto an element. A shadow takes up no space, so adding one never shifts the layout, but a parent with overflow: hidden will clip it. Very large blurs are also more work for the browser to paint, so if you’re animating shadows on many elements at once, keep the blur modest.

Nothing leaves your browser

There’s no server behind this tool. The shadow is rendered by your own browser and the code is assembled in the page as you edit, so nothing you design is sent, stored or logged.

Questions

What do the box-shadow values mean?
A shadow is written as offset-x, offset-y, blur, spread and colour, in that order. The two offsets move the shadow right and down: negative values move it left and up. Blur softens its edge. Spread makes it bigger or smaller than the box before any blurring. The colour includes its opacity, which is why it's usually rgba().
What's the difference between blur and spread?
Blur controls how soft the edge is: 0 is perfectly sharp, and larger values fade the shadow out over a wider band. Spread controls how big the shadow is: a positive value grows it in every direction, and a negative value shrinks it. You can use both together: a large blur with a negative spread gives a soft shadow that stays tucked under the box.
How do I put a shadow on just one side?
Offset the shadow toward that side and use a negative spread to pull it in from the others. For a shadow along the bottom only, try 0 10px 8px -8px with a semi-transparent black: the shadow slides down and shrinks inward by the same amount the blur would otherwise spill sideways, so it only shows underneath.
How do I make a shadow look more natural?
Stack several. Real shadows are sharp close to an object and get softer and fainter farther away, and a single box-shadow can't do both. Layering a few shadows with growing offsets and blurs, each at low opacity, imitates that. The Layered preset shows the idea, and you can add up to six shadows here.
What does inset do?
An inset shadow is drawn inside the box instead of outside it, along its inner edges, above the background and below the content. It's used for pressed buttons, text fields and anything that should look sunk into the page.
In what order are multiple shadows drawn?
The first shadow in the list is drawn on top, and each one after it sits beneath the one before. In the CSS they're separated by commas. If a big shadow seems to be hiding a small one, move the small one earlier in the list.
When should I use drop-shadow instead of box-shadow?
box-shadow always follows the rectangle of the element, rounded by its border-radius, however transparent the content inside is. The drop-shadow() filter follows the visible shape: the outline of a transparent PNG or an SVG icon, for example. drop-shadow has no spread and no inset, so box-shadow is the right tool for ordinary cards, buttons and panels.
How do I use the Tailwind class?
Switch the output to Tailwind class and copy it, then put it on the element. It's an arbitrary-value class: spaces become underscores and the layers are separated by commas, like shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)]. It works with Tailwind's shadow utilities, so it can be combined with the rest of your classes.
Does a shadow change the size of the element or get cut off?
A shadow doesn't take up space, so it never moves or resizes anything around it, which also means it can overlap neighbours. It can be cut off, though: a parent with overflow set to hidden clips any shadow that reaches past its edge, so leave the parent some padding if a shadow disappears at the sides.
Is my design uploaded anywhere?
No. The shadow is drawn by your browser and the code is written inside this tab. Nothing is sent to a server, logged or stored.