NiftyKit

CSS Box Shadow Generator

Build layered CSS box shadows with a live preview and copy the CSS.

By Updated

Runs in your browser. Your input is not uploaded.

Preview background

These options only change the preview, not the CSS.

Presets

Shadow layers

    The first layer is drawn on top. Up to 10 layers. Colours can be any CSS colour; opacity is applied on top of any transparency they already have.

    CSS

    Tailwind CSS class

    How to use it

    1. Start from a preset, or edit the layer that is already there.
    2. Adjust each layer’s offset, blur, spread, colour and opacity, and tick Inset for a shadow inside the element.
    3. Add more layers for depth, and use Up and Down to change which is drawn on top.
    4. Check the shadow on light and dark backgrounds, then copy the CSS or the Tailwind class.

    What each setting does

    • X and Y offset move the shadow right and down (negative values move it left and up). A light source above the page means a positive Y offset.
    • Blur softens the edge. It cannot be negative.
    • Spread makes the shadow bigger or, if negative, smaller than the element.
    • Opacity controls how dark the shadow is. Subtle shadows usually use 5–20%.
    • Inset draws the shadow inside the element’s border, as if it were pressed in.

    The CSS leaves out a spread of zero, and writes colours as HEX when they are solid or as rgb() with an alpha value when they are see-through.

    Tips for realistic shadows

    • Use the same direction for every shadow on a page, as if all were lit by one light.
    • Raised elements need larger offsets and softer blurs than ones resting on the page.
    • On dark backgrounds, shadows are hard to see. A subtle lighter border or a slightly lighter surface often works better.
    • A shadow tinted with the background’s hue looks more natural than pure grey or black.

    Limitations

    • Offsets, blur and spread are in pixels, from −500 to 500. Other units such as rem are not offered.
    • Colours outside the sRGB range, such as very saturated OKLCH colours, are changed to the nearest colour sRGB can show.
    • This makes box-shadow only. Shadows that follow the shape of transparent images or text need the drop-shadow() filter or text-shadow instead.

    Frequently asked questions

    Why use several layers instead of one shadow?

    Real shadows are sharp and dark close to an object and softer further away. One large, blurry shadow cannot do both, so it tends to look flat or smudged. Stacking a few faint layers, each with double the offset and blur of the one before, builds up a shadow that looks natural. The “Smooth” presets work this way.

    What is the difference between blur and spread?

    Blur softens the shadow’s edge: the larger it is, the more gradual the fade. Spread grows or shrinks the shadow before blurring. A negative spread keeps a big blurred shadow tucked under the element, which is useful for soft “floating” effects.

    Do box shadows slow pages down?

    Shadows are drawn by the browser’s graphics hardware and are cheap on most elements. They can cost more when you animate them or put large blurred shadows on many elements at once. If you animate a shadow, consider fading the opacity of a pseudo-element that has the shadow, rather than changing the shadow itself.

    How do I use the Tailwind class?

    Tailwind CSS can take any value in square brackets. Copy the class into your HTML, for example on a div. Spaces inside the brackets are written as underscores, which Tailwind turns back into spaces when it builds your CSS.