Box Shadow Generator

Dial in offsets, blur, spread, and opacity visually, then copy clean CSS for cards, buttons, modals, and hover states. It is useful when you want polished depth without guessing shadow values.

Preview

Offset X0px

Offset Y4px

Blur20px

Spread0px

Shadow Color

Opacity15%

Inset (inner shadow)

CSS Code

box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Box Shadow Generator?

Box Shadow Generator lets you tune offset, blur, spread, inset, and color visually so you can create usable shadows without guessing values. That is helpful when a component needs depth but the right combination is hard to judge from code alone.

It is especially useful for cards, dialogs, buttons, hover states, and subtle elevation systems. A small change in blur or opacity can make a shadow feel polished or heavy, and visual editing makes that difference obvious much faster.

How to Use Box Shadow Generator

Adjust the shadow parameters using the sliders

Choose shadow color and opacity

Toggle inset for inner shadows

Copy the generated CSS code

Common Use Cases

Frontend developers building card and modal shadows that feel consistent across a component library.
Designers testing subtle elevation styles for dashboards, settings pages, and marketing layouts.
Product teams creating hover states for buttons, inputs, and floating action elements.
UI experiments where inset shadows or softer layered shadows are part of a neumorphic or glassy look.

Example Input and Output

A soft UI card shadow usually combines a modest Y offset with a larger blur radius and low-opacity color.

Shadow settings

Offset X: 0px
Offset Y: 14px
Blur: 30px
Spread: -10px
Color: rgba(15, 23, 42, 0.28)
Inset: false

Generated CSS

box-shadow: 0 14px 30px -10px rgba(15, 23, 42, 0.28);

Design tip

For modern UI, a smaller spread with a larger blur often looks cleaner than a dark, hard-edged shadow. Test on both light and tinted backgrounds.

React Native

If you need mobile shadow styles instead of CSS, use the related React Native Shadow Generator to convert the visual look into iOS and Android-friendly values.

Frequently Asked Questions

What are the shadow parameters?

X/Y offset: position, Blur: softness, Spread: size expansion, Color: shadow color with opacity.

What is the difference between a regular shadow and an inset shadow?

A regular shadow appears outside the element and adds elevation. An inset shadow is drawn inside the element and is useful for pressed states, inputs, and recessed UI effects.

Why does my shadow look muddy or too heavy?

That usually means the shadow is too dark, the spread is too large, or the blur is not wide enough. Softer shadows often use lower opacity with a larger blur radius.

Can I use the generated CSS directly in production code?

Yes. The output is standard CSS box-shadow syntax, so you can paste it into a stylesheet, CSS module, or component style block.

Does box-shadow work in all modern browsers?

Yes. box-shadow is broadly supported across modern desktop and mobile browsers.

How do I make a subtle card shadow instead of a dramatic one?

Start with a small or zero X offset, a moderate Y offset, a larger blur, and a low-opacity dark color. That usually looks cleaner than a dark, sharp-edged shadow.