CSS Box Shadow Generator

New

Create CSS box shadows with a live preview. Set the offsets, blur, spread, color and opacity with sliders, stack several shadows for a realistic depth, start from a preset, or paste an existing box-shadow to edit it. Copy the CSS or a Tailwind CSS class when you are done.

Shadow settings

px
px
px
px

Presets

Tailwind CSS: shadow-[0_10px_25px_-5px_rgba(0,0,0,0.2)]

Edit an existing box-shadow

How to create a box shadow

  1. Start from a preset, or adjust the default shadow.
  2. Move the horizontal and vertical offset sliders to set where the shadow falls.
  3. Increase the blur radius for a softer edge, and the spread radius to grow or shrink the shadow.
  4. Pick the shadow color and opacity. Shadows look most natural at 10–25% opacity.
  5. Click Add shadow to stack another layer, and Copy CSS when you are done.

The box-shadow syntax

box-shadow: [inset] <x-offset> <y-offset> [blur-radius] [spread-radius] [color];

/* A soft shadow below the element */
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
Value What it does
Horizontal offset Moves the shadow right (positive) or left (negative).
Vertical offset Moves the shadow down (positive) or up (negative).
Blur radius Softens the edge. 0 gives a hard edge; it cannot be negative.
Spread radius Grows (positive) or shrinks (negative) the shadow before it is blurred.
Color Any CSS color. Use rgba() or an alpha value for a see-through shadow.
inset Draws the shadow inside the box, as if it were pressed in.

Layered shadows

Separate several shadows with commas. The first shadow is drawn on top. Real objects cast a sharp shadow close by and a soft one further away, so two or three layers usually look more natural than one:

box-shadow:
  0 20px 25px -5px rgba(0, 0, 0, 0.1),
  0 8px 10px -6px rgba(0, 0, 0, 0.1);

Tips for better shadows

  • Keep the light source consistent. Use the same direction (usually from above) for every shadow on the page.
  • Use a negative spread with a larger blur for shadows that sit under the element instead of around it.
  • Tint the shadow. On colored backgrounds, a darker shade of the background looks better than gray or black.
  • Show elevation with size. Larger offsets and blur make an element look higher; increase them on hover for a lifting effect.
  • Mind performance. Very large blurs on many elements, or animated shadows, can slow down scrolling. To animate, change the opacity of a pseudo-element that has the shadow instead of box-shadow itself.

box-shadow vs drop-shadow()

box-shadow follows the element's box and its border-radius. The filter: drop-shadow() function follows the visible shape instead, including transparent areas of PNG and SVG images, but it has no spread or inset:

filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.2));

Frequently asked questions

How do I add a shadow on only one side?

Offset the shadow toward that side and use a negative spread equal to the blur, so it doesn't show on the other sides. For a shadow only below an element: box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);

What is an inset shadow?

The inset keyword draws the shadow inside the element's border instead of outside, so the element looks pressed in. It is often used for input fields and pressed buttons.

Can I use box-shadow as a border?

Yes. A shadow with no offset and no blur, such as box-shadow: 0 0 0 2px #3273dc;, draws a line around the element that doesn't change its size or layout. It is a common way to draw focus rings.

How do I use the shadow in Tailwind CSS?

Copy the Tailwind class and add it to your element. It uses an arbitrary value, such as shadow-[0_10px_25px_-5px_rgba(0,0,0,0.2)], where underscores stand for spaces.

Do I need vendor prefixes for box-shadow?

No. All modern browsers support the standard box-shadow property, including multiple and inset shadows, without -webkit- or -moz- prefixes.

Further reading

Last updated:

© 2008–2026 XORBIN.COM. All rights reserved.