CSS Box Shadow Generator

A box shadow generator lets you design CSS shadows by eye instead of tweaking numbers and refreshing the page. Our free tool builds single or multi-layer shadows with horizontal and vertical offset, blur, spread, colour, opacity and inset controls, and shows them on a live preview card with your own background and corner radius. Start from presets such as soft, elevated, floating and neumorphic, then copy the box-shadow CSS or a ready-made Tailwind arbitrary class. It all runs in your browser.

How to use the Box shadow

1. 1 Start from a presetPick soft, subtle, elevated, floating, neumorphic or another preset to get a sensible starting point, including matching background and card colours.
2. 2 Adjust the selected layerUse the sliders or number boxes to set horizontal and vertical offset, blur radius and spread radius. Choose a colour and opacity, and tick inset for an inner shadow.
3. 3 Add more layersAdd or duplicate layers to build realistic depth. The first layer in the list is drawn on top, and you can reorder or remove layers at any time.
4. 4 Match your designSet the page background, card colour and corner radius so the preview looks like the component you are building.
5. 5 Copy the codeCopy the box-shadow CSS for a stylesheet, or the Tailwind class to paste straight into your markup.

How the box-shadow property works

The CSS box-shadow property draws one or more shadows around the border box of an element. Each shadow is written as a list of values: an optional inset keyword, a horizontal offset, a vertical offset, an optional blur radius, an optional spread radius and a colour. For example, 0 10px 30px -5px rgba(10, 10, 10, 0.12) means no sideways movement, 10 pixels down, a 30 pixel blur, shrunk by 5 pixels, in a very transparent near-black.

Positive horizontal offsets push the shadow to the right and negative ones to the left. Positive vertical offsets push it down, which matches light coming from above, the way people expect objects to be lit. The blur radius softens the edge; larger values make the shadow lighter and wider. The spread radius grows or shrinks the shadow before it is blurred, so a negative spread with a large blur gives the soft, tucked-in look used by many modern interfaces.

The shadow follows the element's border-radius, so rounded cards get rounded shadows automatically. Box shadows do not take up space in the layout and do not move other elements, which makes them safe to change on hover. They are clipped by any parent with overflow: hidden, a common reason a shadow seems to vanish.

Why layered shadows look more realistic

Real objects cast more than one kind of shadow. There is a small, darker contact shadow right underneath, where the object nearly touches the surface, and a larger, softer shadow further out caused by light bouncing around the room. A single box-shadow can only imitate one of these, which is why one heavy shadow often looks flat or muddy.

Stacking two or three layers solves this. A typical recipe is a tight layer such as 0 1px 2px at around 6 per cent opacity, a middle layer such as 0 4px 8px with a small negative spread, and a wide layer such as 0 16px 32px with a larger negative spread. Each layer is faint on its own, but together they give a crisp edge and a gentle falloff. The elevated preset in the generator uses this approach.

Keep shadows consistent across a site. Choose a small set of elevation levels, for example resting cards, raised dropdowns and floating dialogs, and reuse the same values everywhere. Inconsistent shadows make an interface feel unplanned even when visitors cannot say why. Store your levels as CSS custom properties or in your Tailwind theme so everyone uses the same ones.

Preset styles explained

The presets are starting points rather than rules. Each one sets suitable background and card colours too, because a shadow that looks right on white can disappear on a grey page.

• Soft: one wide, faint shadow with a negative spread. Good for content cards, pricing tables and images on a light background.
• Subtle: two very small layers that mimic the default card shadow used in many design systems. Ideal for form fields, list rows and quiet surfaces.
• Elevated and floating: multi-layer or long shadows for menus, popovers, modals and sticky headers that should sit clearly above the page.
• Neumorphic and pressed: a dark shadow on one side and a light shadow on the other, on a card the same colour as the background, so the element looks moulded from the surface. Pressed uses inset shadows for a pushed-in state.
• Hard offset, mint glow and inner: a solid offset shadow for a bold, retro style, a coloured glow for dark themes, and an inset shadow for wells and input fields.

Neumorphism and accessibility

Neumorphic designs look striking in screenshots but can be hard to use. Because the button and the background share the same colour, the edges are defined only by faint shadows. People with low vision, anyone using a phone in bright sunlight and users of cheap screens may struggle to tell where a button starts and ends, or whether it is pressed.

If you use the neumorphic preset, add something more than shadow to show the important states. A visible focus ring, a text label, an icon or a small colour change on active buttons all help. WCAG asks for at least 3:1 contrast for the visual boundary of controls that need to be identified, so check your colours with our Colour Converter and Contrast Checker. Never rely on an inset shadow alone to show that a toggle is switched on.

Respect user settings too. Many people turn on reduced motion or high contrast modes. Shadows that animate dramatically on hover can be toned down with a prefers-reduced-motion media query, and in forced colours mode Windows removes box shadows completely, so make sure borders or outlines still show where each control is.

Using the Tailwind arbitrary value

Tailwind CSS ships with a handful of shadow utilities such as shadow-sm, shadow-md and shadow-xl. When you need an exact shadow, Tailwind 3 and later accept arbitrary values in square brackets, for example shadow-[0_10px_30px_-5px_rgba(10,10,10,0.12)]. Underscores stand in for spaces because class names cannot contain spaces, and Tailwind converts them back when it builds your CSS. Commas separate multiple layers.

The generator writes the colour without spaces inside rgba so the class is valid as it stands. Paste it into your markup as a normal class. Tailwind only generates classes it can find written out in full in your source files, so do not build the class name from pieces in JavaScript. If you use the same shadow in many places, add it to boxShadow in your Tailwind configuration and give it a name, which keeps your markup shorter and your design consistent.

Performance and browser support

Box shadows are supported in every current browser without prefixes, so the old -webkit-box-shadow lines are no longer needed. Drawing a shadow is cheap for a handful of elements, but very large blur values on hundreds of items, such as every row of a long table, can make scrolling less smooth on older phones. Animating box-shadow directly on hover forces the browser to repaint on every frame.

A common trick for smooth hover effects is to put the larger shadow on a pseudo-element with opacity 0, then fade its opacity in on hover. Opacity changes are handled by the graphics card, so the animation stays smooth. For simple cards a short transition on box-shadow is usually fine. Everything in the generator runs in your browser, so you can test as many variations as you like.

Examples you can copy

.card {
  border-radius: 24px;
  box-shadow: 0 10px 30px -5px rgba(10, 10, 10, 0.12);
}

.dropdown {
  box-shadow:
    0 1px 2px 0 rgba(10, 10, 10, 0.06),
    0 4px 8px -2px rgba(10, 10, 10, 0.08),
    0 16px 32px -8px rgba(10, 10, 10, 0.16);
}

.neu { background: #e0e5ec;
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5); }
.neu:active {
  box-shadow: inset 6px 6px 12px rgba(163, 177, 198, 0.6), inset -6px -6px 12px rgba(255, 255, 255, 0.5); }

<div class="rounded-3xl bg-white shadow-[0_10px_30px_-5px_rgba(10,10,10,0.12)]">...</div>

Common mistakes to avoid

Frequently asked questions