Last updated: October 2026
What is a CSS box shadow generator?
Short answer: It lets you design
box-shadow effects visually instead of guessing numbers in your stylesheet. Drag the sliders above for offset, blur, spread and opacity, flip between inset and outset, and watch the preview update live — then copy the finished CSS (or Tailwind / React code) straight into your project.How to use it
Short answer: 1) Drag the four sliders to position and soften your shadow. 2) Pick a color and opacity, or choose outset vs inset. 3) Try a preset (Soft Lift, Neon Glow) or stack up to 3 shadows with + Add shadow. 4) Switch the output tab to CSS, Tailwind, React or React Native and hit Copy code.
Box shadow syntax, explained
Every shadow is five values in order: offset-x, offset-y, blur-radius, spread-radius, color. An optional inset keyword at the front turns it into an inner shadow.
/* soft shadow 8px below the box */
box-shadow: 0 8px 24px 0 rgba(15,23,42,0.18);
/* pressed-in effect */
box-shadow: inset 0 2px 8px 0 rgba(15,23,42,0.25);
box-shadow: 0 8px 24px 0 rgba(15,23,42,0.18);
/* pressed-in effect */
box-shadow: inset 0 2px 8px 0 rgba(15,23,42,0.25);
Offset-x / offset-y move the shadow right and down (negative values go left and up). Blur radius softens the edge — 0 gives a hard, graphic edge. Spread radius grows (positive) or shrinks (negative) the shadow before blurring; a slightly negative spread keeps large blurs tight and classy. Color is usually a dark tone at low opacity — pure black at 50%+ looks muddy on most designs.
Layering multiple shadows
Short answer: Separate shadows with commas — the first one paints on top:
box-shadow: 0 1px 2px rgba(15,23,42,0.12), 0 12px 32px -4px rgba(15,23,42,0.18); Layering is how designers fake realistic light: a tight, darker shadow for contact plus a wide, soft one for ambience. The generator stacks up to 3 layers — click a layer chip to edit it, × to remove it.A classic two-layer recipe: keep layer one small and sharp (0 1px 2px at ~12% opacity) for the edge where the element meets the surface, then add layer two big and diffuse (0 12px 32px -4px at ~18%) for the glow around it. The Double Layer preset above applies exactly this.
Frequently asked questions
What is the CSS box-shadow syntax?
box-shadow: offset-x offset-y blur-radius spread-radius color. Example: box-shadow: 0 8px 24px 0 rgba(15,23,42,0.18) puts a soft shadow 8px below the box, blurred 24px. Add the keyword inset at the front for an inner shadow instead of an outer one.
What is the difference between blur radius and spread radius?
Blur radius softens the shadow's edge — 0 gives a hard, crisp edge, higher values fade it out. Spread radius grows or shrinks the shadow's size before blurring: positive spread makes it bigger, negative spread shrinks it (great for tight, subtle shadows).
How do I make an inset (inner) shadow?
Put the keyword inset before the offsets: box-shadow: inset 0 2px 8px 0 rgba(15,23,42,0.25). In the generator above, just switch the toggle from Outset to Inset — the preview updates live.
How do I layer multiple box shadows?
Separate shadows with commas: box-shadow: 0 1px 2px rgba(15,23,42,0.12), 0 12px 32px -4px rgba(15,23,42,0.18). The first shadow paints on top. Use the "+ Add shadow" button above to stack up to 3 layers and the generator writes the comma-separated code for you.
How do I use the output in Tailwind CSS?
Switch to the Tailwind tab and copy the arbitrary value, e.g. shadow-[0px_8px_24px_0px_rgba(15,23,42,0.18)]. Spaces become underscores — that is the exact format Tailwind's arbitrary values require. Paste it as a class on your element.
Can I use box shadows in React Native?
React Native supports shadows on iOS via shadowColor, shadowOffset, shadowOpacity and shadowRadius, plus elevation on Android. The React Native tab above converts your first outset layer into that format (shadowRadius is approximately blur divided by 2). Note React Native has no inset shadows.
How do I make a soft, realistic shadow?
Use a large blur radius, zero or slightly negative spread, and low opacity dark color — e.g. 0 8px 24px 0 rgba(15,23,42,0.18). For extra realism, layer two shadows: a tight one for contact (0 1px 2px) plus a wide soft one (0 12px 32px -4px). Try the Soft Lift and Double Layer presets above.
Is this box shadow generator free and private?
Yes — free forever, no signup, no watermark. Everything runs in your browser; nothing you design is uploaded, stored or tracked.
Does box-shadow slow down my page or animations?
A static box-shadow costs nothing extra once the page has painted. The problem is animation: animating box-shadow forces the browser to repaint on every frame, which is one of the most expensive steps in rendering. For hover elevation effects, put the shadow on a ::before or ::after pseudo-element and animate that element's opacity instead — it looks identical at a smooth 60fps.
What is the difference between box-shadow and filter: drop-shadow()?
box-shadow follows the element's rectangular box (or its border-radius) and supports inset plus multiple stacked layers. filter: drop-shadow() follows the actual visible shape, including the transparent areas of PNGs — so use it for logos, icons and irregular images. drop-shadow() supports only a single shadow and has no inset.
Do I need vendor prefixes like -webkit-box-shadow?
No. box-shadow has worked without any prefix in every modern browser since Chrome 10, Firefox 4, Safari 5.1 and IE9, all back in 2011. If you see old -webkit- or -moz- prefixed versions in legacy code, deleting them changes nothing in any supported browser.
Which color format is best for box shadows: hex, rgb, rgba or hsl?
rgba is the most practical choice because it packs transparency into a single value, e.g. rgba(15,23,42,0.18). Plain hex has no transparency channel (8-digit hex does, but it is less readable), and hsl works the same as rgba for shadows. Keep the alpha low — around 0.1 to 0.2 — so the result reads as a shadow instead of a solid shape.
How do I make a colored or brand-tinted shadow?
Pick your brand color and use it at low opacity instead of black — for example a blue glow like rgba(59,130,246,0.35). Tinted shadows keep elevation cohesive with your palette instead of looking like dirty gray. The Neon Glow preset above is a one-click starting point for this style.
What is a neumorphic shadow?
Neumorphism uses two shadows — one light, one dark — on a background nearly the same color as the element, creating a soft embossed look. You can build it in this generator by stacking two layers. One caution: the style frequently fails WCAG contrast requirements, so reserve it for decorative elements rather than controls that need clearly visible states.