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.

Tips

  • 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.

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.

More tools in this category