What do the four box-shadow values mean?

In order they are the horizontal offset X, vertical offset Y, blur radius and spread radius. Positive X and Y move the shadow right and down, a larger blur gives softer edges, and a positive spread grows the shadow while a negative spread shrinks it — a negative spread with a large blur gives a soft shadow that appears only underneath. Adding inset turns it into an inner shadow.

How do I make a neumorphism shadow?

Neumorphism needs the element and background to share the same color, plus two opposing shadows: a darker one to the bottom right and a lighter (often white) one to the top left, which makes the element look extruded. Make both inset for a pressed look. Click the neumorphism raised or pressed preset and adjust the colors from there.

Does the order of shadow layers matter?

Yes. The first shadow in CSS is painted on top, so layers higher in the list sit above the others. Usually small, crisp shadows go first and large, soft ones last. Long shadows and 3D text are built from many layers offset one pixel at a time.

How do I use the shadow in Tailwind CSS?

For box-shadow use the generated shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),...] class; for text-shadow use the arbitrary property [text-shadow:...]. Both work in Tailwind v3 and v4, and spaces are already converted to underscores.

🌓

🌓CSS Box Shadow Generator - Layered box-shadow & text-shadow with Presets

Natural-looking shadows are usually layered — a wide, soft ambient shadow plus a tight one close to the element. This tool lets you build them the way a design app would: every layer has its own horizontal and vertical offset, blur radius, spread radius, color and opacity, and can be inset; layers can be toggled, duplicated, deleted and reordered. Change the preview background, element color, border radius and size to judge the shadow against your real palette, or switch to text-shadow mode to type your own text, set the font size and color, and create outlines, 3D lettering and neon glows. Presets cover the common cases: soft card shadows, smooth layered shadows, Material Design elevations from 1dp to 24dp, raised and pressed neumorphism, long shadows, hard offset (neo-brutalism) shadows, outer and inner glows, plus neon, 3D, outline, retro and long-shadow text. Output is standard CSS along with Tailwind shadow-[...] and [text-shadow:...] arbitrary value classes.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use CSS Box Shadow Generator

1Choose box-shadow or text-shadow, or click a preset
2Add or select a layer and adjust offset, blur, spread, color and opacity
3Tune the preview background and element, then copy the CSS or Tailwind class

FAQ

What do the four box-shadow values mean?: In order they are the horizontal offset X, vertical offset Y, blur radius and spread radius. Positive X and Y move the shadow right and down, a larger blur gives softer edges, and a positive spread grows the shadow while a negative spread shrinks it — a negative spread with a large blur gives a soft shadow that appears only underneath. Adding inset turns it into an inner shadow.
How do I make a neumorphism shadow?: Neumorphism needs the element and background to share the same color, plus two opposing shadows: a darker one to the bottom right and a lighter (often white) one to the top left, which makes the element look extruded. Make both inset for a pressed look. Click the neumorphism raised or pressed preset and adjust the colors from there.
Does the order of shadow layers matter?: Yes. The first shadow in CSS is painted on top, so layers higher in the list sit above the others. Usually small, crisp shadows go first and large, soft ones last. Long shadows and 3D text are built from many layers offset one pixel at a time.
How do I use the shadow in Tailwind CSS?: For box-shadow use the generated shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),...] class; for text-shadow use the arbitrary property [text-shadow:...]. Both work in Tailwind v3 and v4, and spaces are already converted to underscores.