Build soft, layered box shadows in a live preview, then copy them as plain CSS, a Tailwind CSS 4 class or a Bootstrap 5 utility. Start from one of 20 presets or stack your own layers.

Each layer has its own offset, blur, spread, colour, opacity and inset setting. The smoothing helper turns a single shadow into several eased layers, and the link keeps your work, so you can share it or return to it later.

Box shadow generator Layered shadows to CSS, Tailwind CSS 4 and Bootstrap 5

Presets

Preview

Preview settings

Element
Background

Code

The name is used for the Tailwind token and the Bootstrap class, for example shadow-custom.

box-shadow

filter: drop-shadow() alternative

Layers

    The first layer is painted on top. Keys on a layer: arrow up and down select, Alt plus arrow moves, D duplicates, Delete removes.

    Layer 1

    Hex, rgb(), hsl() or oklch(). An alpha value sets the opacity.

    Smooth this layer

    Splits the selected layer into several softer layers that ease out from the element, like a real soft shadow. The layer becomes the largest one, and its opacity is what the stacked layers add up to.

    How to use it

    1. Pick a preset that is close to the look you want, such as Smooth, Elevation 3 or Neumorphic raised.
    2. Select a layer in the Layers list and adjust its horizontal and vertical offset, blur, spread, colour and opacity. Tick Inset for an inner shadow.
    3. Add, duplicate, reorder or hide layers to build depth. The first layer in the list is painted on top.
    4. Open Smooth this layer to split the selected shadow into several eased layers, then check it against your own background and element colours in Preview settings.
    5. Choose the CSS, Tailwind 4 or Bootstrap 5 tab, set a name and colour format, and copy the code into your project.

    How CSS box-shadow works

    A box shadow is written as box-shadow: [inset] x-offset y-offset blur spread colour. A positive x offset moves the shadow right and a positive y offset moves it down. Negative values move it left and up.

    Blur sets how soft the edge is. It cannot be negative, and a value of 0 gives a hard edge. Spread grows the shadow shape before it is blurred when positive and shrinks it when negative. If you leave out the colour, the browser uses the element's text colour.

    The inset keyword draws the shadow inside the element's border, which makes it look pressed in. Shadows follow border-radius, take up no layout space and are not clipped by the element itself, though a parent with overflow: hidden will cut them off.

    Layered shadows for realistic depth

    Real objects cast a dark, tight shadow where they touch a surface and a wide, faint shadow further out. A single box-shadow can only show one of these, so it often looks either flat or muddy.

    box-shadow accepts a comma-separated list, and the first shadow in the list is painted on top. Stacking several layers with growing offset and blur and low opacity gives a smoother falloff. An eased curve, where distances grow slowly at first and quickly later, keeps the shadow dense near the element.

    A negative spread on the large layers stops the blur from showing at the sides, so the shadow appears mostly below the element. The smoothing helper in this tool also divides the opacity so that the stacked layers add up to the opacity of the shadow you started from.

    Tint shadows to the background

    Black at low opacity looks grey and dull on coloured backgrounds. A shadow tinted with a darker, more saturated version of the background hue looks more natural, because real shadows pick up the colour of the surface they fall on.

    oklch() makes this easy: keep the hue of the background, lower the lightness and add some transparency. A coloured element, such as a blue button, can also cast a shadow in its own hue to suggest a glow or light passing through.

    On dark backgrounds, dark shadows are hard to see. Lighter surfaces for raised elements, subtle borders or a soft glow usually show elevation better there.

    Performance and accessibility

    Shadows are painted, so animating box-shadow repaints the element on every frame. For hover effects, put the larger shadow on a pseudo-element and animate its opacity, or move the element with transform. Very large blur values on many elements also add painting work.

    A shadow is not a boundary for contrast purposes. WCAG 1.4.11 asks for a 3:1 contrast for the visual information needed to identify inputs and other controls, and a soft shadow rarely meets that. Give form fields and buttons a border or fill with enough contrast.

    In forced colours modes, such as Windows Contrast themes, browsers remove box shadows. A focus indicator made only with box-shadow disappears there, so keep an outline, even a transparent one, as a fallback.

    Use it with our free components: Bootstrap cards · Neumorphism UI kit · Dashboard widgets

    Frequently asked questions

    What is the difference between box-shadow and filter: drop-shadow()?

    box-shadow follows the element's box and border-radius, supports spread, inset and multiple layers, and is the usual choice for cards and buttons. filter: drop-shadow() follows the visible pixels, so it suits transparent PNGs, SVG icons and clip-path shapes, but it has no spread or inset.

    How many shadow layers should I use?

    Two or three layers cover most interface elements: a tight contact shadow plus one or two wider ones. Five or six eased layers give a very smooth result for large cards and modals. More layers add little that can be seen and cost more painting work.

    How do I use a custom shadow in Tailwind CSS 4?

    For a one-off, use an arbitrary value such as shadow-[0_4px_12px_rgba(0,0,0,0.1)], with underscores in place of spaces and commas between layers. To reuse it, add a --shadow-name variable inside @theme in your CSS, which creates a shadow-name utility that works with variants such as hover:.

    How do I add a custom shadow in Bootstrap 5?

    Add a utility class with box-shadow and !important, which matches how Bootstrap's own .shadow classes are written. To change the look of .shadow itself, override --bs-box-shadow after loading Bootstrap, or set $box-shadow before importing Bootstrap's Sass.

    Why is my box shadow cut off or not showing?

    The most common cause is a parent with overflow: hidden, which clips the shadow at its edges. Also check that the colour is not fully transparent, that a later rule such as shadow-none or box-shadow: none is not overriding it, and that the shadow is not hidden behind a sibling with a higher stacking order.

    More free tools