CSS Box Shadow Generator: Free Live Preview

A CSS box shadow generator lets you design a box-shadow visually and copy the finished CSS. This free tool gives you sliders for offset, blur, spread and opacity, a color picker, an inset switch, stackable layers and nine presets, so you see the result on a live preview before it goes into your stylesheet.

What Is the CSS box-shadow Property?

The box-shadow property draws one or more shadows around the frame of an element. It follows the element's rectangle and its rounded corners, so a box with a large border-radius gets a shadow with matching curves.

A single shadow is written as a list of values in this order: an optional inset keyword, horizontal offset, vertical offset, blur radius, spread radius and color. For example, box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25); is a soft dark shadow pushed 4 pixels right and 4 pixels down.

• Horizontal offset: positive values move the shadow right, negative values move it left.
• Vertical offset: positive values move it down, negative values move it up.
• Blur radius: 0 gives a sharp edge, and higher numbers make the edge softer and wider.
• Spread radius: positive values grow the shadow, negative values shrink it.
• Color: usually a semi-transparent black, written as an rgba value so the page shows through.

You can stack several shadows by separating them with commas. The first shadow in the list is painted on top. Box shadows do not change the size or position of an element, so adding one never shifts the rest of your layout.

How to Use the CSS Box Shadow Generator

You build a shadow by moving sliders and reading the code that updates beneath the preview. Follow these steps.

1. Choose a starting point from Presets: Soft, Medium, Hard, Elevated, Inset, Neumorphism, Glow Blue, Glow Green or None. You can also start from the default shadow and adjust it.
2. Drag Horizontal Offset and Vertical Offset to place the shadow. Both run from -100px to 100px.
3. Set Blur Radius (0 to 100px), Spread Radius (-50px to 50px) and Opacity (0 to 100%) until the edge looks right.
4. Pick a Shadow Color with the color picker. Tick Inset if you want the shadow inside the box.
5. Click Add Layer to stack another shadow. Select any layer in the Shadow Layers list to edit it, and use the small remove button to delete one.
6. Test the result under Live Preview by switching between Light gray bg, White bg, Dark bg and Blue bg.
7. Click Copy CSS and paste the line from Generated CSS into your stylesheet. Reset returns the tool to its starting state.

Worked Example: A Bottom-Only Shadow

One of the most common requests is a shadow that appears only along the bottom edge. A plain offset shadow leaks onto the sides, but a negative spread pulls the sides back in.

Set Horizontal Offset to 0, Vertical Offset to 10, Blur Radius to 15, Spread Radius to -5 and Opacity to 30, with the color left at black. The tool outputs box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, 0.3);.

Here is why it works. The shadow starts as a copy of the box, shrinks by 5px on every side because of the negative spread, then shifts down 10px. The left and right edges stay hidden behind the box, and only the bottom shows. Switch the preview to Dark bg and you will see how faint a black shadow becomes there, which is a signal to raise opacity or pick a glow instead.

A Neumorphism Example

Neumorphism needs two layers on a soft, mid-light background. Make layer one dark: offset 8 and 8, blur 16, black at about 20% opacity. Click Add Layer and make layer two light: offset -8 and -8, blur 16, white at about 80% opacity. The pair makes the box look pushed out of the surface. The Neumorphism preset gives you this idea in one click, and you can adjust it from there.

How to Read and Act on the Results

The Live Preview and the Generated CSS box always match, so judge the shadow by eye first and copy the code second. Use the checks below to decide whether it needs another pass.

• Shadow looks muddy or dirty: opacity is too high or blur is too low. Widely used UI shadows sit between 8% and 25% opacity with a blur of 10px to 30px.
• Shadow looks pasted on: the offset is large but the blur is small. Raise blur to roughly double the vertical offset for a natural look.
• Shadow is invisible on a dark page: black cannot darken a dark background. Use a glow with a bright color, or lighten the surface behind the box.
• Shadow spills to the sides: reduce Spread Radius into negative values, as in the bottom-only example.
• Box looks pressed in: that is the Inset effect. Untick Inset if you wanted the box to look raised.

For realistic depth, stack two or three layers: a tight, darker shadow for contact and a wide, faint shadow for ambient light. The Elevated preset follows this idea, and Add Layer lets you extend it.

Who Uses a Box Shadow Generator?

Anyone who styles cards, buttons or inputs can save time by seeing a shadow before writing it. Typical situations include:

• Front-end developers who need a hover state, such as a card that lifts when the pointer moves over it.
• Designers handing off specs who want exact pixel values instead of a screenshot.
• Beginners learning what each number in box-shadow does by moving a slider and watching the box.
• Theme and template builders who test one shadow against light, white, dark and blue backgrounds.
• Form designers who add an inset shadow to inputs or a glow to the focused field.

Once the shadow is done, you can pair it with other generators. Try a CSS gradient generator for the box background, or a text shadow generator for the headline inside it. For motion, a CSS animation builder can fade a shadow in on hover.

Best Practices and Common Mistakes

Good shadows are subtle, consistent and tested on the real background. A few habits prevent most problems.

Keep one light direction

Pick a single light source, usually from the top, and use the same positive vertical offset everywhere. Mixed directions across cards make a page feel unfinished.

Use rgba, not solid black

The tool writes the color as rgba from your color and opacity, so the shadow blends with whatever sits behind it. A fully opaque black shadow looks heavy on almost any design.

Test on the real background

A shadow that looks perfect on white can disappear on blue or gray. Cycle through all four preview backgrounds before copying the code.

Do not expect a gradient shadow

The box-shadow property accepts a color, not a gradient. If you search for a gradient shadow, the usual workaround is to stack several colored layers or place a blurred gradient element behind the box.

Know when it is not a drop shadow

Box-shadow wraps the rectangle of the element. The CSS drop-shadow filter follows the visible shape, so it suits transparent PNGs and icons. For cutout shapes, you may want to combine a drop-shadow filter with a clip-path shape, because box-shadow gets clipped away by clip-path.

Watch performance on large lists

Very large blur values on hundreds of elements, or shadows that animate constantly, can slow scrolling on low-end devices. Keep blur modest and animate opacity or transform instead when you can.

Limitations to Keep in Mind

This tool produces the box-shadow declaration only. It does not write the full rule for your element, so you still add the selector, size and border-radius yourself. The output is plain CSS with pixel units and an rgba color. If your project uses a utility framework or a preprocessor, you will paste the values into that format by hand.

Offsets are limited to 100px, blur to 100px and spread to 50px, which covers nearly all interface work. Shadows are also drawn outside the element box, so a parent with overflow hidden will cut them off. If a shadow seems to vanish in your page, check the parent's overflow first.

After pasting the code, run your stylesheet through a CSS formatter to keep it tidy, and compress it for production with a CSS minifier. You will find more helpers in the web developer tools collection.

Design your shadow now: pick a preset, adjust the sliders, check all four backgrounds and click Copy CSS. You will have clean, ready-to-paste box-shadow code in under a minute.