RSRobince Studio

Box Shadow Generator

Tune offsets, blur, spread, colour and opacity with sliders and watch the shadow change live. Stack up to six layers for realistic depth, mark any layer as inset, then copy the finished box-shadow declaration.

Runs in your browser. Your files are never uploaded.

Loading Box Shadow Generator…

How to use Box Shadow Generator

  1. Adjust offset X and Y, blur and spread for the selected layer.
  2. Pick a colour and opacity, and tick Inset if the shadow should be inside the box.
  3. Add more layers for a softer, more realistic result.
  4. Copy the CSS and paste it into your stylesheet.

Anatomy of box-shadow

The box-shadow property accepts a comma-separated list. Each shadow has an optional inset keyword, a horizontal offset, a vertical offset, an optional blur radius, an optional spread radius and a colour. Positive offsets move the shadow right and down. The first shadow in the list is painted on top.

Shadows follow the shape of the element including its border radius, so rounding the corners of the box rounds the shadow too. They do not follow the transparent edges of an image, for which the drop-shadow filter is the better tool.

Making shadows look good

Keep opacity low. A shadow at 10 to 25 percent black generally feels more refined than a dense one. Increase the vertical offset more than the horizontal one, because light in interfaces is usually imagined to come from above. Use a coloured shadow, tinted toward the background or the element colour, for a friendlier feel than neutral grey.

  • Use a negative spread with a large blur for a floating effect.
  • Use a zero blur, zero offset shadow with spread as a solid outline that does not affect layout.
  • Reduce shadows in dark themes, where they are barely visible, and consider a subtle border or lighter surface instead.

Accessibility and notes

Shadows alone should not be the only signal of a focus state or boundary, since people with low vision may not perceive them. Pair them with a visible outline or border where it matters.

This generator produces standard, unprefixed CSS and runs entirely on your device. Colours are chosen as hex and written as rgba values.

Why use this box shadow generator tool

  • Up to six layers. Combine several shadows in one declaration, the technique behind most modern card designs.
  • Colour with opacity. Output uses rgba() so you control transparency without extra work.
  • Inset option. Switch any layer to an inner shadow for pressed or recessed effects.
  • Preview controls. Change the page colour, box colour and corner radius to test the shadow against your design.

Frequently asked questions

What do blur and spread do?

Blur softens the edge of the shadow, a larger value giving a wider, fainter fade. Spread grows or shrinks the shadow before blurring, so a negative spread keeps the shadow tucked under the box, which is a common way to get a clean lifted look.

Why use more than one shadow?

Real light creates a tight dark contact shadow plus a large soft ambient one. Layering a small, sharper shadow with a large, light one looks more natural than a single heavy shadow.

Does box-shadow affect layout or performance?

It does not change layout, since it is painted outside the box without taking space. Very large blur radii on many animated elements can slow rendering on weak devices, so animate transforms or opacity instead where possible.

More free tools

PX to REM Converter

Convert pixels to rem and em, and back, with a custom root font size. Includes a table of common sizes from 8px to 64px and a copy-ready CSS declaration.

Open tool

Base64 Encode & Decode

Encode text to Base64 or decode Base64 back to text. Supports UTF-8 and URL-safe Base64. Free, instant and runs in your browser.

Open tool

URL Encode & Decode

Encode or decode URLs and query strings with percent-encoding. Choose component or full-URL mode. Free, instant and private.

Open tool