What order are the values in a CSS box-shadow?

Horizontal offset, vertical offset, blur radius, spread radius, then color, with an optional inset keyword. Only the two offsets are required. A negative horizontal offset moves the shadow left and a negative vertical offset moves it up.

What is the difference between blur and spread?

Blur softens the shadow’s edge: 0 is a sharp edge and larger values spread it out. Spread makes the shadow bigger when positive and smaller when negative, before the blur is applied.

Can a box-shadow have a negative blur?

No, CSS does not allow it. The generator keeps blur between 0 and 100 px, offsets between -100 and 100 px, spread between -50 and 50 px and opacity between 0 and 1, whether you type, click or use the arrow keys.

How do I add more than one box-shadow?

Separate the shadows with commas in one box-shadow value. The first one listed is on top. The generator supports up to five layers and writes them in that order.

How do I use this shadow in Tailwind CSS?

Pick Tailwind in the output tabs and copy the shadow-[...] class, which uses underscores in place of spaces. The Tailwind MD and Tailwind LG presets load the values of the shadow-md and shadow-lg utilities: 0 4px 6px -1px and 0 2px 4px -2px for md, 0 10px 15px -3px and 0 4px 6px -4px for lg, at 10% black.

Does a box-shadow change the size of the element?

No. A box-shadow is painted outside the box without changing its size or pushing other content aside, so a large shadow can overlap neighbors unless you add margin.

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable. How it works

Shadow Layers (1/5)

Layer 1

Horizontal Offset

10px

Vertical Offset

10px

Blur Radius

20px

Spread Radius

0px

Color

Opacity: 0.25

Inset

Keyboard Shortcuts

↑↓←→±1px

Shift+Arrow±10px

About the CSS Box Shadow Generator

A CSS box-shadow is written offset-x offset-y blur spread color, for example box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);, which is the shadow the generator starts with. Stack up to five comma-separated layers, make any of them inset, and copy the result as CSS, a Tailwind shadow-[...] class, SCSS, CSS-in-JS or a CSS variable. The shadow can go on the element itself or on its ::before or ::after pseudo-element, and the code then adds the content: "" a pseudo-element needs before it is drawn, position: absolute, inset: 0 and border-radius: inherit to lay it over the box, and position: relative on the element.

How to use this tool

Move the sliders or type values for horizontal offset, vertical offset, blur, spread, color and opacity. The arrow keys change a number by 1 px, or 10 px with Shift.
Click Add Layer for a second shadow, or tick Inset to draw a layer inside the box. The first layer is drawn on top.
Under Apply the shadow to, keep element or pick ::before or ::after. A pseudo-element target writes .element { position: relative; } and .element::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: ...; } in CSS, and relative after:content-[''] after:absolute after:inset-0 after:rounded-[inherit] after:shadow-[...] in Tailwind.
Pick CSS, Tailwind, SCSS, CSS-in-JS or Variable and copy the code.

Frequently asked questions

What order are the values in a CSS box-shadow?: Horizontal offset, vertical offset, blur radius, spread radius, then color, with an optional inset keyword. Only the two offsets are required. A negative horizontal offset moves the shadow left and a negative vertical offset moves it up.
What is the difference between blur and spread?: Blur softens the shadow’s edge: 0 is a sharp edge and larger values spread it out. Spread makes the shadow bigger when positive and smaller when negative, before the blur is applied.
Can a box-shadow have a negative blur?: No, CSS does not allow it. The generator keeps blur between 0 and 100 px, offsets between -100 and 100 px, spread between -50 and 50 px and opacity between 0 and 1, whether you type, click or use the arrow keys.
How do I add more than one box-shadow?: Separate the shadows with commas in one box-shadow value. The first one listed is on top. The generator supports up to five layers and writes them in that order.
How do I use this shadow in Tailwind CSS?: Pick Tailwind in the output tabs and copy the shadow-[...] class, which uses underscores in place of spaces. The Tailwind MD and Tailwind LG presets load the values of the shadow-md and shadow-lg utilities: 0 4px 6px -1px and 0 2px 4px -2px for md, 0 10px 15px -3px and 0 4px 6px -4px for lg, at 10% black.
Does a box-shadow change the size of the element?: No. A box-shadow is painted outside the box without changing its size or pushing other content aside, so a large shadow can overlap neighbors unless you add margin.

Cards, floating buttons and inset fields

Build the shadow for a card, a floating button or an inset field. Up to five layers can be stacked, each with its own offset, blur, spread, color, opacity and inset switch. Two presets load Tailwind's md and lg shadow values. Neumorphic pairs a dark shadow down and right (6px 6px 12px, black at 15%) with a light one up and left (-6px -6px 12px, white at 80%), a look that needs a background the same color as the box. Flat is one hard-edged copy of the box, 4px 4px with no blur at 25% black.

Copy the result as CSS, a Tailwind shadow-[...] class, SCSS, CSS-in-JS or a CSS variable. Apply the shadow to the element, or to its ::before or ::after: the CSS adds position: relative to .element and writes a .element::after rule with content: ""; (a pseudo-element needs it to be drawn) and position: absolute; inset: 0; border-radius: inherit. Tailwind adds relative after:content-['] after:absolute after:inset-0 after:rounded-[inherit].

What the code is made of

box-shadow: [inset] x y blur spread color

x and y move the shadow, blur softens its edge (it cannot be negative), spread grows or shrinks it before the blur, and inset draws it inside the box. Layers are separated by commas and the first one is on top. A box-shadow does not change the size of the box or push other content.

The starting layer is box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);. Hex color and opacity become one rgba() value, and the Tailwind output is shadow-[10px_10px_20px_0px_rgba(0,0,0,0.25)], with underscores for spaces.

Every number is held to its limit wherever it changes: offsets -100 to 100 px, blur 0 to 100 px, spread -50 to 50 px, opacity 0 to 1. A negative spread shrinks the shadow on every side before the blur is applied; both Tailwind presets use one with a downward offset, so their shadow shows mostly below the box rather than around it.

Related Tools

View all tools

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.

CSS

CSS Flexbox Generator

Set flex-direction, wrap, justify-content, align-items, gap and per-item flex, order and align-self, then copy the code as CSS, SCSS, variables or Tailwind.