What CSS does shadow-md produce in Tailwind?

In v4, shadow-md is box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1): two layers, each at 10% black. shadow-lg is 0 10px 15px -3px with a second layer of 0 4px 6px -4px, and shadow-2xl is one layer, 0 25px 50px -12px at 25% black.

Is shadow-sm the same in Tailwind v4 as in v3?

No. The v4 upgrade guide renamed the scale: v3 shadow-sm is now shadow-xs and v3 shadow is now shadow-sm. This tool follows v4, so shadow-sm prints 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1), and it does not offer a bare shadow class.

How do I make an inset shadow in Tailwind?

Tick Inset Shadow and the tool writes an arbitrary class with inset on every layer, such as shadow-[inset_0_1px_3px_0_rgb(0_0_0_/_0.1),inset_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] for sm. Tailwind v4 also has built-in inset-shadow-2xs, inset-shadow-xs and inset-shadow-sm classes with their own values (inset-shadow-sm is inset 0 2px 4px rgb(0 0 0 / 0.05)); the tool does not print those.

How do I write a custom shadow with shadow-[…]?

Choose the arbitrary option and type a CSS box-shadow value, such as 0 10px 30px -10px rgb(0 0 0 / 0.4), 0 2px 4px rgb(0 0 0 / 0.2). The class becomes shadow-[0_10px_30px_-10px_rgb(0_0_0_/_0.4),0_2px_4px_rgb(0_0_0_/_0.2)], because Tailwind reads underscores in an arbitrary value as spaces. Type the value with ordinary spaces; one typed with underscores is refused.

Does the tool check that a custom value is valid CSS?

No. It checks the shape: two offsets per layer, brackets that balance and no characters that would end a declaration. A value that passes can still be wrong CSS, for example 0 4px 6px reed with a misspelled color, so look at the shadow in the preview box before you copy it.

How do I add a custom shadow to the Tailwind v4 theme?

Type a name in Theme token name. For md named card the tool writes @theme { --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } and the class shadow-card. Tailwind turns every --shadow-* theme variable into a shadow- utility, so after you paste the block into your CSS, shadow-card works like the built-in sizes. With Inset Shadow on, the value carries inset on every layer.

Tailwind Shadow Generator

Get the Tailwind CSS v4 shadow class and CSS box-shadow for sizes 2xs to 2xl, an inset version, or a custom shadow value written as shadow-[...]. How it works

Shadow Size

Theme token name (optional)

Names the shadow for the Tailwind v4 @theme block, such as card-hover.

Inset Shadow

Want sliders for the offsets, blur, spread and colour? Build a shadow visually in the CSS box-shadow generator, which also exports a Tailwind shadow class.

Preview

Results

Tailwind Class

shadow-md

CSS box-shadow

box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

About the Tailwind Shadow Generator

The Tailwind CSS v4 shadow scale has seven sizes: shadow-2xs, shadow-xs, shadow-sm, shadow-md, shadow-lg, shadow-xl and shadow-2xl. shadow-md is box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1), two layers of 10% black. Pick a size, tick Inset Shadow or type your own value, and the tool prints the class next to the CSS it stands for.

Tailwind v4 shadow sizes and the CSS they apply

Size	Class	box-shadow
2xs	shadow-2xs	0 1px rgb(0 0 0 / 0.05)
xs	shadow-xs	0 1px 2px 0 rgb(0 0 0 / 0.05)
sm	shadow-sm	0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
md	shadow-md	0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
lg	shadow-lg	0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
xl	shadow-xl	0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
2xl	shadow-2xl	0 25px 50px -12px rgb(0 0 0 / 0.25)

What the tool prints for each size with Inset Shadow off. The tool also offers shadow-none, which prints box-shadow: none.

The same sizes with Inset Shadow on

Size	Class the tool writes
2xs	shadow-[inset_0_1px_rgb(0_0_0_/_0.05)]
xs	shadow-[inset_0_1px_2px_0_rgb(0_0_0_/_0.05)]
sm	shadow-[inset_0_1px_3px_0_rgb(0_0_0_/_0.1),inset_0_1px_2px_-1px_rgb(0_0_0_/_0.1)]
md	shadow-[inset_0_4px_6px_-1px_rgb(0_0_0_/_0.1),inset_0_2px_4px_-2px_rgb(0_0_0_/_0.1)]
lg	shadow-[inset_0_10px_15px_-3px_rgb(0_0_0_/_0.1),inset_0_4px_6px_-4px_rgb(0_0_0_/_0.1)]
xl	shadow-[inset_0_20px_25px_-5px_rgb(0_0_0_/_0.1),inset_0_8px_10px_-6px_rgb(0_0_0_/_0.1)]
2xl	shadow-[inset_0_25px_50px_-12px_rgb(0_0_0_/_0.25)]

Every layer of a two-layer shadow gets its own inset keyword, because the keyword applies to one layer only.

How to use this tool

Pick a size from the list, or choose the arbitrary option to type your own box-shadow value.
Tick Inset Shadow to move the shadow inside the box.
Copy the Tailwind class, the CSS box-shadow or, for a custom value, the arbitrary syntax. The preview box shows the same shadow.
To reuse the shadow under your own name, type a theme token name (lowercase letters, digits and hyphens, starting with a letter, up to 32 characters). Paste the @theme block into your main CSS file and use the shadow-<name> class it creates.

Frequently asked questions

What CSS does shadow-md produce in Tailwind?: In v4, shadow-md is box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1): two layers, each at 10% black. shadow-lg is 0 10px 15px -3px with a second layer of 0 4px 6px -4px, and shadow-2xl is one layer, 0 25px 50px -12px at 25% black.
Is shadow-sm the same in Tailwind v4 as in v3?: No. The v4 upgrade guide renamed the scale: v3 shadow-sm is now shadow-xs and v3 shadow is now shadow-sm. This tool follows v4, so shadow-sm prints 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1), and it does not offer a bare shadow class.
How do I make an inset shadow in Tailwind?: Tick Inset Shadow and the tool writes an arbitrary class with inset on every layer, such as shadow-[inset_0_1px_3px_0_rgb(0_0_0_/_0.1),inset_0_1px_2px_-1px_rgb(0_0_0_/_0.1)] for sm. Tailwind v4 also has built-in inset-shadow-2xs, inset-shadow-xs and inset-shadow-sm classes with their own values (inset-shadow-sm is inset 0 2px 4px rgb(0 0 0 / 0.05)); the tool does not print those.
How do I write a custom shadow with shadow-[…]?: Choose the arbitrary option and type a CSS box-shadow value, such as 0 10px 30px -10px rgb(0 0 0 / 0.4), 0 2px 4px rgb(0 0 0 / 0.2). The class becomes shadow-[0_10px_30px_-10px_rgb(0_0_0_/_0.4),0_2px_4px_rgb(0_0_0_/_0.2)], because Tailwind reads underscores in an arbitrary value as spaces. Type the value with ordinary spaces; one typed with underscores is refused.
Does the tool check that a custom value is valid CSS?: No. It checks the shape: two offsets per layer, brackets that balance and no characters that would end a declaration. A value that passes can still be wrong CSS, for example 0 4px 6px reed with a misspelled color, so look at the shadow in the preview box before you copy it.
How do I add a custom shadow to the Tailwind v4 theme?: Type a name in Theme token name. For md named card the tool writes @theme { --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } and the class shadow-card. Tailwind turns every --shadow-* theme variable into a shadow- utility, so after you paste the block into your CSS, shadow-card works like the built-in sizes. With Inset Shadow on, the value carries inset on every layer.

Shadow classes for Tailwind v4

Picking the shadow for a card, a dropdown or a modal means knowing what each class really draws: shadow-sm on a card is barely there, shadow-xl lifts a modal off the page. The list holds the seven v4 sizes from 2xs to 2xl plus shadow-none, which prints box-shadow: none, and an arbitrary option that turns a shadow from a design file into a shadow-[…] class. A theme token name such as card adds an @theme block with --shadow-card, which gives the project its own shadow-card class. The preview box shows the shadow you are about to copy, and your last choice stays in this browser until you clear it. For sliders, the page links to the CSS box-shadow generator, which also writes a Tailwind class.

How the classes are produced

A named size is looked up in the Tailwind v4 table, 2xs to 2xl, and printed as shadow- plus the size, with its box-shadow. For example shadow-md is 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1), and shadow-2xl is one layer, 0 25px 50px -12px rgb(0 0 0 / 0.25).

Inset Shadow puts inset in front of every comma-separated layer and writes the class as shadow-[inset_0_4px_6px_-1px_…], with spaces turned into underscores, which Tailwind reads as spaces. Tailwind’s own inset-shadow-2xs, inset-shadow-xs and inset-shadow-sm classes are not printed.

A custom value needs two lengths (the x and y offset, in px, rem, em, vw, vh, cm, mm, in, pt or another CSS length unit, or 0) in every layer, balanced brackets, no quotes, semicolons, braces, angle brackets or backslashes, and fewer than 300 characters. Type it with ordinary spaces: a value typed with underscores is refused. That is a check of the shape, not a CSS parser, so a misspelled color still passes. An underscore that belongs to the value, as in a custom property name, is escaped with a backslash in the class, because Tailwind reads every other underscore as a space.

Related Tools

View all tools

CSS

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.

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 Neumorphism Generator

Make soft UI (neumorphism) shadows from one surface color: pick flat, convex, concave or pressed, set distance, blur and light, then copy CSS, SCSS or Tailwind.

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 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.

CSS

CSS Glassmorphism Generator

Set blur, saturation, tint opacity, corner radius, shadow and inner glow for a frosted glass panel and copy the backdrop-filter CSS, SCSS or Tailwind classes.