CSS Box Shadow Generator
Make soft, realistic shadows from several layers, fine-tune each one, or paste a shadow you already have — then copy it as CSS, Tailwind classes, a React style or a set of elevation tokens.
At a glance
- Smooth mode stacks up to 8 shadow layers, each twice as far and as soft as the one before, so the shadow fades the way a real one does instead of ending in one grey blur.
- The shadow can take its colour from the background — a dark shade of the same hue — which looks more natural than black on coloured pages.
- A layer editor for x, y, blur, spread, colour, opacity and inset, with show/hide, duplicate and reorder. The first layer in the list is drawn on top.
- 27 presets: eight designs, the 10 shadow and inset-shadow utilities of Tailwind CSS v4 and the 9 Material Design elevations (1 to 24 dp).
- Paste any box-shadow — hex, rgb(), hsl() or a colour name, with or without
box-shadow:— to see it and edit it. Anything it cannot read is explained. - Copy CSS (with an optional hover lift that respects reduced motion), Tailwind v4 classes checked against Tailwind’s compiler, a React style, a drop-shadow() filter or five elevation tokens as CSS variables.
Step by step
How to make a box shadow in CSS
- 1
Choose how to start
Use Smooth for a soft layered shadow, Presets for Tailwind, Material or a ready design, or Paste CSS to edit a shadow you have.
- 2
Shape the shadow
In Smooth, set where the light comes from, the distance, softness, number of layers and opacity. In Layers, choose a layer and change its offsets, blur, spread, colour and opacity.
- 3
Check it in place
Set the background, element colour, corner radius and shape to match your page, and try the Dark preview.
- 4
Add a hover state
Switch on Lift on hover for a deeper shadow and a small lift when the element is pointed at.
- 5
Copy the code
Choose CSS, Tailwind, React, drop-shadow or Elevation tokens, then Copy or Download.
Features
Everything you need, nothing you don’t
Shadows that look real
One big blur looks flat. Layered shadows put a sharp, dark shadow near the element and a wide, faint one far away, like light in a room.
Every layer in reach
Pick any layer to change it, hide it to compare, duplicate it to build on it, or move it up. The CSS updates as you drag.
Tailwind and Material, exactly
The presets use the values Tailwind CSS v4 and Material Design publish. When your shadow matches a Tailwind utility, the Tailwind tab gives you that class name.
Edit what you already have
Paste a shadow from your stylesheet, a design tool or a framework and it opens in the layer editor.
A whole elevation scale
Turn one Smooth setting into five matching levels, --shadow-1 to --shadow-5, ready for cards, menus, dialogs and hover states.
Private
Everything runs in your browser. Your settings are saved only on this device.
How box-shadow works
The CSS box-shadow property draws one or more shadows around an element’s box, following its rounded corners. Each shadow is written as up to four lengths and a colour, with the word inset to put it inside the element. Separate several shadows with commas; the first one is drawn on top.
| Part | Example | What it does |
|---|---|---|
| x offset | 0 | moves the shadow right (negative: left) |
| y offset | 8px | moves the shadow down (negative: up) |
| blur | 24px | how soft the edge is; 0 is a hard edge, and it cannot be negative |
| spread | -4px | grows the shadow (or shrinks it, if negative) before the blur |
| colour | rgba(15, 23, 42, 0.12) | usually a dark, see-through colour; without one, the text colour is used |
inset | inset 0 2px 4px … | draws the shadow inside the element, so it looks pressed in |
Why layered shadows look better
A real shadow is sharp and dark close to an object and gets wider and fainter further away. One box-shadow layer can only do one of those at a time, so it looks either harsh or muddy. Stacking a few layers, each with double the offset and blur of the last, gets much closer — the idea Josh W. Comeau and Tobias Ahlin popularised as smooth or layered shadows.
Tinting helps too. A shadow on a blue page is not grey; it is a darker, duller blue. With Colour from the background on, the tool works out that colour for you in the OKLCH colour space.
Tailwind CSS v4 shadow values
From Tailwind CSS v4.3’s default theme. In v4, the old shadow-sm is now shadow-xs and the old shadow is now shadow-sm, so check the names when you upgrade from v3.
| Class | box-shadow |
|---|---|
shadow-2xs | 0 1px rgb(0 0 0 / 0.05) |
shadow-xs | 0 1px 2px 0 rgb(0 0 0 / 0.05) |
shadow-sm | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) |
shadow-md | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) |
shadow-lg | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) |
shadow-xl | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) |
shadow-2xl | 0 25px 50px -12px rgb(0 0 0 / 0.25) |
box-shadow or drop-shadow()?
box-shadow always follows the element’s box. filter: drop-shadow() follows the visible shape instead — the outline of a transparent PNG, an SVG icon or text. It has no spread and no inset, and several drop-shadows are applied one after another, so each one also shadows the shadow before it. Use the drop-shadow tab for images and icons, and box-shadow for cards, buttons and panels.
FAQ
Frequently asked questions
How do I add more than one box shadow?
box-shadow declaration, for example box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.12);. A second box-shadow line would replace the first instead of adding to it. The first shadow in the list is drawn on top.How do I put a shadow on only one side?
0 8px 6px -6px rgba(0, 0, 0, 0.3). For one inside edge, use inset, as in inset 0 2px 0 rgba(0, 0, 0, 0.1) for the top.What is the difference between blur and spread?
Why does my shadow look grey and dirty?
How do I make shadows in Tailwind CSS?
shadow-sm, shadow-md or shadow-lg, or an arbitrary value for anything else — spaces become underscores, as in shadow-[0_8px_24px_rgba(0,0,0,0.12)]. The Tailwind tab writes the right one for your shadow, and the class names are for Tailwind v4.Do box shadows work on dark backgrounds?
0 0 0 1px rgba(255, 255, 255, 0.06). Use the Dark preview to check.Are box shadows bad for performance?
box-shadow itself makes the browser repaint each frame, which can stutter on large elements or slow phones. For many animated cards, put the hover shadow on a pseudo-element and animate its opacity instead.Which browsers support box-shadow?
-webkit-box-shadow prefix has not been needed for over ten years.Keep going
Related tools
CSS Neumorphism Generator
Free neumorphism generator: soft UI box-shadows from any colour and light angle, with contrast checks, pressed states, Tailwind classes and a UI kit.
CSS Glassmorphism Generator
Free glassmorphism generator: design frosted glass with blur, tint, border and grain, check text contrast live, and copy CSS, Tailwind or React code.
CSS to Tailwind Converter
Convert CSS to Tailwind classes online: hover, media queries, dark mode and gradients become variants, colours match the palette. Tailwind v4 and v3, free.
Image Color Picker
Pick colours from any image: get HEX, RGB, HSL and CMYK codes with a zoom loupe, plus the image’s colour palette. Free, private — nothing is uploaded.
Bento Grid Generator
Free bento grid generator: draw tiles with the mouse, preview desktop, tablet and phone, and copy responsive CSS Grid, Tailwind or React code.
Scroll Animation Generator
Free scroll animation generator: fade, slide, zoom and reveal effects with CSS scroll-driven animations, parallax and progress bars, plus a Firefox fallback.
Last updated Report a problem or suggest a feature