CSS Box Shadow Generator

Fine-tune a CSS box-shadow — horizontal and vertical offset, blur radius, spread, color, opacity, and inset — with a live preview, then copy the exact box-shadow CSS or the equivalent Tailwind shadow utility classes. Useful for cards, buttons, modals and any element that needs depth.

How to use the CSS Box Shadow Generator

  1. Set the offset. Adjust the X/Y offset sliders to move the shadow horizontally and vertically.
  2. Adjust blur and spread. Set the blur radius for softness and the spread to grow or shrink the shadow.
  3. Pick a shadow color and opacity. Choose the shadow color and how transparent it is.
  4. Toggle inset if needed. Enable inset for an inner shadow instead of a drop shadow, then copy the CSS or Tailwind classes.

Frequently asked questions

How do I create a soft box-shadow in CSS?

Use a larger blur radius with a low-opacity shadow color, e.g. box-shadow: 0 4px 12px rgba(0,0,0,0.1). This generator builds that value from sliders with a live preview.

What is the difference between offset, blur and spread in box-shadow?

Offset (X/Y) moves the shadow position; blur softens its edges; spread grows or shrinks the shadow shape independent of the element itself.

How do I create an inset shadow in CSS?

Add the inset keyword to box-shadow to draw the shadow inside the element’s border instead of outside it — this generator has an inset toggle.

What are good box-shadow values for a card?

A common modern card shadow is a small offset, moderate blur (8–20px) and low opacity (0.05–0.15) — subtle enough to suggest elevation without looking heavy.

Can I stack multiple shadows?

CSS box-shadow supports comma-separated multiple shadows on one element for layered depth; this generator focuses on producing one clean shadow value you can combine manually if needed.

Can I export the shadow as Tailwind classes?

Yes. Toggle Tailwind mode to get the closest matching Tailwind shadow utility classes instead of raw CSS.

Is this box-shadow generator free?

Yes — completely free with no sign-up, and it runs entirely in your browser.

Does it support a dark mode preview?

Yes, toggle the light/dark preview since shadow visibility differs a lot between light and dark backgrounds.

Other generators: Glassmorphism CSS Generator · CSS Gradient Generator · CSS Animation Generator · CSS Grid & Flexbox Layout Generator · OKLCH Color Generator · Bento Grid Generator · CSS Scroll-Driven Animation Generator · CSS Border Radius Generator · Fluid Typography Generator · CSS Grid Template Areas Generator · CSS Filter Generator · CSS Cubic Bezier Easing Generator · CSS Button Generator · all CSS tools · CSS Generator on IgnLab Launch