CSS Box Shadow Generator

Adjust offset, blur, spread, color, and opacity with sliders to generate a CSS box-shadow with a live preview. Copy the generated code with one click.

Last updated: 2026-09-20

What box-shadow does

The CSS `box-shadow` property casts a shadow from an element. Its value lists the horizontal offset, vertical offset, blur radius, spread radius and colour in that order — but **four numbers in a row, with the difference between blur and spread hard to grasp from the words alone**, make it a tiresome property to write by hand. This tool lets you move each value on a slider and see the result immediately.

What decides the character of a shadow is the combination rather than the magnitudes. **Shadows that read as natural usually keep the offset small, the blur large and the opacity low**; push the offset out and the opacity up and you get something hard-edged, as though cut out and pasted on. Adding `inset` casts the shadow inside the element instead, producing a recessed look. The generated code copies with one click, and everything runs in your browser.

How to build a shadow

Set the offsets This fixes the apparent direction of the light. Keeping X at zero and Y slightly positive usually reads naturally.
Adjust the blur radius This is the softness of the shadow's edge. Larger values spread it wider and fainter.
Adjust the spread radius This fattens or thins the shadow itself. **Unlike blur, it does not change how hard the edge is.**
Choose the colour and opacity Semi-transparent black is the safe choice, but a dark tone close to the background applied faintly blends better.
Copy the code Paste the generated `box-shadow` value straight into your stylesheet.

Tips for getting more out of it

You can type exact numbers into the input fields instead of dragging the sliders when you need precise values.
Turn on "inset" to draw the shadow inside the element, creating a pressed-in, recessed look instead of a raised one.
Increasing spread expands the whole shadow outline, while increasing blur softens and diffuses its edges — combine both for different textures.
Lowering the opacity makes the shadow feel lighter and more natural, which helps when elements overlap on top of colored backgrounds.
The generated CSS can be pasted directly into your stylesheet — it works especially well combined with hover effects on buttons and cards.

Where this helps

Giving cards and buttons some depth

Even a slight shadow makes it much clearer that an element can be clicked.

Lifting modals and dropdowns

The strength of the shadow expresses how far the panel floats above the content behind it.

Reproducing a shadow from a design mock-up

When translating a design tool's shadow settings into CSS, you can match the values while comparing side by side.

Creating a recessed look

With `inset` you can try treatments that make an input field appear to sink into the page.

box-shadow terms explained

Offset: How far the shadow is displaced. The first value is horizontal, the second vertical, with positive values moving right and down.
Blur radius: How much the shadow's edge is softened. **At zero you get a shadow with a crisp outline.**
Spread radius: How much the shadow is enlarged. A negative value shrinks it instead.
inset: The keyword that casts the shadow inside the element, producing a recessed appearance.
Opacity: The density of the shadow, given as the alpha value in `rgba()`. **Too dense a shadow reads as heavy.**
Multiple shadows: Several shadows can be layered, separated by commas. A tight dark shadow over a wide faint one looks convincingly natural.

Frequently Asked Questions

Blur radius controls how soft the shadow's edge looks — a larger value spreads the fade over a wider area. Spread radius, on the other hand, changes the size of the shadow shape itself: positive values make it larger than the element, negative values shrink it. Combining both gives fine control over the shadow's texture.

The inset keyword draws the shadow inside the element's border instead of outside it. While a normal box-shadow makes an element look like it is floating above the page, inset makes it look pressed in or recessed, which is often used to style the border of input fields.

The CSS box-shadow property accepts a comma-separated list of shadows, letting you layer several for a more three-dimensional look. This tool focuses on generating a single shadow for simplicity — if you need multiple layers, you can manually append comma-separated values to the generated CSS.

box-shadow is a standard CSS property supported by all modern browsers, including Internet Explorer 9 and later. Vendor prefixes such as -webkit- and -moz- were once required, but today the unprefixed property works everywhere.

A fully opaque black shadow (0% transparency) can look unnaturally harsh or float oddly depending on the background color. Lowering the opacity to create a semi-transparent black or gray produces a softer shadow that blends naturally with any background.

Side Note — how box-shadow changed what the web could express

Before box-shadow was standardized in CSS3, creating a drop shadow on the web usually meant pre-rendering one into a background image in an image editor, or faking it by stacking several div elements with gradient backgrounds. Even a small tweak to the shadow's shape or softness meant redoing the image, which made design iteration slow and costly.

Once browsers began implementing box-shadow as part of CSS3 around 2009, a shadow could be produced with a single CSS declaration. No image assets were needed, pages became lighter to load, and shadows kept their shape correctly even as the layout resized responsively.

When Google introduced Material Design in 2014, it built the concept of "elevation" on top of box-shadow: each element is assigned a height along the Z-axis, and elements placed higher cast larger, darker shadows. This gave otherwise flat interfaces a sense of depth and hierarchy, an idea that still shapes many design systems today.

Browse all trivia