What do the four numeric values mean?

The first is the horizontal offset — positive values shift the shadow right, negative values shift it left. The second is the vertical offset — positive moves it down, negative moves it up. The third is the blur radius, where 0 produces a sharp edge and higher values soften the shadow. The fourth is spread, where 0 lets blur do all the work, positive values make the shadow larger before blur, and negative values shrink it. Typical shadows use a horizontal offset of 0, a vertical offset of 2-8 pixels, and a blur of 4-20 pixels.

What's the difference between blur and spread?

Blur is a gaussian blur effect that softens the shadow's edge. Higher blur produces a softer, wider, lighter-looking shadow. Spread expands or shrinks the shadow before blur is applied — it doesn't soften anything, just resizes. The two work together: spread controls thickness, blur controls softness, and combining them lets you produce shadows that other parameter combinations can't reach.

How do I create realistic shadows?

Real-world shadows almost always come from a light source above, which produces a downward-pointing shadow. Soft shadows with high blur read as more realistic than sharp ones with low blur. Slight transparency (something like rgba opacity between 0.1 and 0.3) feels more natural than full-opacity black. For genuinely photorealistic depth, layer two shadows — a small sharp key shadow plus a larger softer ambient one.

What is an inset shadow?

An inset shadow renders inside the element rather than outside it, produced by adding the 'inset' keyword to the box-shadow declaration. It's useful for depressed or clicked button states, sunken-looking inputs, and indented containers. It's a common pattern in skeuomorphic UI designs that need to communicate a pressed-in state.

Can I have multiple shadows on one element?

Yes. Comma-separate the values inside a single box-shadow declaration. Something like 'box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05)' applies both shadows simultaneously. The first shadow in the list draws on top of the others, which matters when you want one to take visual priority. Stacking shadows is how you get realistic depth, Material Design elevations, and layered effects.

Will it work in older browsers?

All modern browsers support box-shadow without any vendor prefix, going back to IE9. For very old browsers like IE6 through IE8, no fallback exists in CSS itself — you'd need to fall back to a border or a background image to approximate the effect, but those alternatives are pretty crude. In practice, IE9 has been the practical floor for years.

Does using box-shadow affect performance?

It's generally fine for static elements. Performance can degrade when you have many shadowed elements on screen at once, when you're animating the shadow itself, or when the blur radius gets large. For animations, prefer changing transform or opacity properties — those are GPU-accelerated and animate much more smoothly than shadow changes.

Box Shadow Generator

Generate CSS box shadows visually online with multiple layers. Free box shadow generator with blur, spread, offset, and color controls.

Generators CSS Tools

Instant results

Preview

Background

Box Color

CSS Code

box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);

Presets:

Shadow Layers

Layer 1

Inset

X Offset: 0px

Y Offset: 4px

Blur: 6px

Spread: -1px

Color

Opacity: 10%

Layer 2

Inset

X Offset: 0px

Y Offset: 2px

Blur: 4px

Spread: -2px

Color

Opacity: 10%

About Box Shadow

CSS box-shadow adds shadow effects around an element. You can stack multiple shadows, use inset for inner shadows, and control offset, blur, spread, and color for each layer.

How to Use Box Shadow Generator

Adjust offset and blur

Use the sliders to set horizontal offset, vertical offset, blur radius, and spread. The live preview updates immediately, so you can see what each change does to the shadow.

Pick the shadow color

Use the color picker to choose a shadow color and adjust the opacity for subtlety. Most natural-looking shadows use low-opacity black with an alpha somewhere between 0.1 and 0.3.

Toggle inset if needed

For an inset (inner) shadow that creates a depressed-button effect, enable the inset checkbox. Without it, you'll get the standard outer drop shadow that's appropriate for elevated content.

Copy the CSS code

Copy the generated box-shadow CSS to your clipboard and paste it into your stylesheet. For multiple-layer shadows, configure each one in turn and concatenate the values with commas in your final declaration.

When to Use Box Shadow Generator

UI element design

Cards, buttons, modals, and dropdowns almost all use shadows for visual depth. The generator produces CSS box-shadow code from a visual editor, which is dramatically faster than guessing values by typing them and refreshing. It's a daily tool for web designers, frontend developers, and anyone prototyping UI components.

Material Design elevation

Google's Material Design uses a shadow elevation system at specific depths (1dp, 2dp, 4dp, 8dp), each with its own combination of shadow values. The generator helps you recreate or customize those standard shadows when you're building Material-aligned designs or Android web apps that need to feel native to that ecosystem.

Inset shadows

Inset shadows create the visual effect of pressing into the page rather than rising out of it — useful for pressed button states, inset form fields, and other depressed UI elements. The generator produces inset variants for interactive states, skeuomorphic designs, and containers that benefit from a sense of depth-below rather than depth-above.

Multiple shadow layers

Realistic shadows often combine several values — a large soft ambient shadow plus a smaller sharper key shadow, mimicking how light actually behaves. The generator supports stacking shadows in a single declaration, which is how you get photorealistic shadow effects and accurate light source simulation.

Box Shadow Generator Examples

Subtle card shadow

Input

Offset: 0 2px, Blur: 4px, Color: rgba(0,0,0,0.1)

Output

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

A standard subtle shadow for cards. The slight downward offset implies light coming from above, the small blur softens the edge, and the low opacity black keeps it from feeling heavy. This is the canonical pattern for elevated content.

Material elevation level 4dp

Input

Two shadows: 0 4px 5px rgba(0,0,0,0.14), 0 1px 10px rgba(0,0,0,0.12)

Output

box-shadow: 0 4px 5px rgba(0,0,0,0.14), 0 1px 10px rgba(0,0,0,0.12);

Material Design's elevation level 4dp uses two shadows — one directional, one ambient. The combination recreates the natural-looking depth of Google's Material elevation system, where each elevation step adds another visual layer.

Inset depressed button

Input

Offset: 0 2px, Blur: 4px, Spread: 0, Color: rgba(0,0,0,0.2), inset

Output

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);

An inset shadow that simulates a depressed or clicked state. This pattern works for pressed buttons, sunken inputs, and indented containers — anywhere you want the surface to feel pushed in rather than raised out.

Tips & Best Practices for Box Shadow Generator

1.Soft shadows with high blur and low opacity tend to look more realistic than hard shadows. Match the implied light source, which is almost always slightly above and behind the element.
2.Try color in your shadows for visual interest. Subtle blue or purple tints look modern, while pure black shadows can feel heavy and outdated when used everywhere.
3.Watch performance when you're using many shadowed elements. Heavy shadows on long lists or animated elements can slow rendering, so simplify shadows in those contexts even if they look slightly less polished.
4.The spread parameter expands the shadow before any blur is applied. It's useful when you want a thicker shadow without increasing the blur, or for creating custom outline effects without using border.
5.Multiple shadows compose into a richer depth effect. Stack two or three for natural-looking output. The first shadow in the list draws on top (appears closer to the viewer), so order matters when you're layering.
6.Test your shadows in dark mode. Shadows on dark backgrounds often need a lighter color or higher opacity to remain visible at all, since the contrast with a dark surface is much lower than with a light one.

Frequently Asked Questions

It's a CSS property that adds shadows to elements. The syntax is 'box-shadow: h-offset v-offset blur spread color [inset]'. A simple example is 'box-shadow: 0 2px 4px rgba(0,0,0,0.1)', which creates a subtle drop shadow. The property is used everywhere in modern web UIs — cards, buttons, modals, and almost any depth effect that gives visual hierarchy to a layout.

Box Shadow Generator

About Box Shadow

How to Use Box Shadow Generator

Adjust offset and blur

Pick the shadow color

Toggle inset if needed

Copy the CSS code

When to Use Box Shadow Generator

UI element design

Material Design elevation

Inset shadows

Multiple shadow layers

Box Shadow Generator Examples

Subtle card shadow

Material elevation level 4dp

Inset depressed button

Tips & Best Practices for Box Shadow Generator

Frequently Asked Questions

Related Tools

Text Shadow Generator

Gradient Generator

Border Radius Generator

Flexbox Generator

CSS Grid Generator

AI CSS Generator