CSS Box Shadow Generator

Updated November 2026 · free, works in your browser

A CSS box shadow generator lets you set the offset, blur, spread and color of a shadow, see the result on a preview box and copy the finished box-shadow declaration. Move the sliders or type exact values, and the code updates instantly. Everything runs in your browser, so nothing is uploaded or stored.

How to use the box shadow generator

1. Set the X offset and Y offset to move the shadow horizontally and vertically. A positive Y value pushes the shadow below the element.
2. Increase the blur to soften the edges. A blur of 0 gives a hard, crisp shadow.
3. Use spread to make the shadow larger or smaller than the element, then pick a color and lower the opacity until the shadow looks natural.
4. Switch between Outside and Inset if you want the shadow inside the element, for example on a pressed button or an input field.
5. Press Copy CSS and paste the line into your stylesheet. You can also copy a link that restores your exact settings later.

How it is calculated

The generator writes the standard CSS syntax defined in the CSS Backgrounds and Borders specification:

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

• offset-x and offset-y: the distance the shadow is shifted, in pixels. Negative values move it left or up.
• blur-radius: how far the edge is blurred. It cannot be negative.
• spread-radius: grows the shadow in all directions when positive and shrinks it when negative.
• color: built as rgba(r, g, b, alpha), where r, g and b come from the hex color you pick and alpha is the opacity percentage divided by 100.
• inset: an optional keyword that draws the shadow inside the border instead of outside.

Common shadow styles

These are common starting points, not rules. Adjust them to your design and background.

Frequently asked questions

Can I use more than one shadow on an element?

Yes. CSS accepts several shadows separated by commas. A common trick is to layer a small, tight shadow with a large, soft one for a more realistic depth. Generate each layer here and join them with a comma.

What is the difference between blur and spread?

Blur softens the edge of the shadow, while spread changes its size before blurring. A negative spread combined with a large Y offset produces a shadow that appears only under the element.

Why does my shadow look harsh?

Usually the opacity is too high or the blur too low. Real shadows are soft, so try 10–25% opacity and a blur of at least twice the offset.

Does box-shadow affect layout?

No. A box shadow does not take up space and does not move neighbouring elements. It can be clipped by a parent with overflow hidden, so leave enough room around the element.

Does box-shadow follow rounded corners?

Yes. The shadow follows the element's border-radius. For shapes with transparent areas, such as a PNG icon, the filter drop-shadow function is the better choice.

Well-tuned shadows matter most on listing pages, where cards for rooms, hotels and destinations need to stand out and stay readable on every screen. If you are building or refreshing a page for a guesthouse or a travel project, test your cards on a phone as well as a desktop. And when you plan a trip yourself, comparing accommodation by destination on a clean, well-designed listing makes the decision much easier.