/en/tool/box-shadow-generator/ works Calculated by the browser
Build a shadow layer by layer or choose a ready-made one: Tailwind, Material, card, neumorphism, neon, or an inset field. Soft shadow mode creates three to six layers automatically based on the light angle, distance, and two curves. Adjust the preview scene to match your layout: background, block color, shape, size, border radius, and light or dark theme. Export it in five ways — CSS with rgba, CSS with hex alpha, Tailwind, an SCSS variable, and values for Figma's Effects panel — and switch the same layers to text-shadow or filter: drop-shadow.
Layers are drawn in list order: the first one is on top of the others.
How it looks
Property
Output format
box-shadow: none;The browser calculates it. No colors or slider values are sent anywhere: after the page loads, it makes no requests. The layer set is stored in the page URL— copy the link, and your colleague will see exactly the same shadow.
The fastest approach is to take a ready-made shadow from the tiles above. Tailwind and Material use the values found in the frameworks; “card,” “floating,” “neomorphism,” “neon,” and “inset field” are techniques people search for most often.
For a custom option, it is easiest to start with a soft shadow: the light angle determines where it falls, the distance determines how far, and the number of layers determines how smooth the edge is. The curves control how quickly the blur grows and how quickly the alpha fades.
Then adjust the layers manually. Each slider has a numeric field: use the mouse to find a value and the keyboard to enter an exact one. You can move a layer up or down, duplicate it, and temporarily disable it without deleting it.
Adjust the scene to match your layout: enter the background on which the shadow will appear in “background color.” On a dark background, a black shadow is not visible at all—use either a colored glow or a very dense shadow instead.
The “Pick from background” button for each layer colors the shadow with a shade of the background and darkens it. Pure black over a colored background creates a gray spot—the most common cause of a “dirty” shadow.
The property switcher combines the same layers into text-shadow or filter: drop-shadow. Spread and inset are not transferred—neither property has these parameters, and the panel reports this.
Take the result in the format you need: CSS, Tailwind in the form shadow-[…], an SCSS variable, or values for the Effects panel in Figma. The “Download as file” button returns the same result as a file, while “Set link” provides an address that opens the set for a colleague.
box-shadow: [inset] X Y blur spread color
Layers are listed with commas. The first layer in the list is drawn above the others, just like with background-image. text-shadow has only three parameters (X, Y, blur, and color), and drop-shadow has the same number; its layers are separated by spaces, not commas.
The input data is the same as the default field values: you can calculate it mentally and confirm that the tool is telling the truth.
The color is not pure black but dark blue #0F172A: it has a hue, so on a light gray background the shadow reads as a shadow rather than a gray sticker.
#0F172A is R 15, G 23, B 42. Opacity 6% is alpha 6 ÷ 100 = 0.06, which gives rgba(15, 23, 42, 0.06).
Zero values are written without units: 0, not 0px. A spread of 0 is omitted from the string entirely.
First layer: 0 1px 2px rgba(15, 23, 42, 0.06). Second: 0 8px 24px rgba(15, 23, 42, 0.12).
Layers are separated by commas. For two layers, the panel prints three lines: first “box-shadow:”, then each layer on a new line with indentation. One layer remains on a single line. Below, the same two layers are combined into one continuous line—for the browser, it is the same thing; the line breaks are only for readability.
The same set in the hex tab looks like 0 1px 2px #0f172a0f: 0.06 × 255 ≈ 15, and 15 in hexadecimal is 0f.
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.12);
Usually, this is caused by a single layer with high opacity and pure black. Split the shadow into two or three layers with 6–15% opacity each: a short, sharp near layer and a long, blurred far layer—that is what creates a soft shadow. Replace black with a dark shade of the background: the “Pick from background” button for each layer takes the scene color and darkens it, so the shadow no longer looks like a gray sticker.
Spread enlarges the shadow shape before it is blurred, so the shadow becomes larger than the block on all sides. Blur only softens the edge. Negative spread shrinks the shape and is often needed to keep a long shadow from extending beyond the sides—that is what Tailwind shadows are built on, starting with md.
It moves the shadow inside the block. This shadow does not extend outward at all: it is drawn from the inner edge toward the center. It is used for inset input fields and pressed button states. Outer and inner layers can be mixed in one property, but inset does not exist in text-shadow or drop-shadow—when you switch the property, the panel discards such layers and reports it.
box-shadow always draws a shadow around the block's rectangle, including rounded corners. filter: drop-shadow follows the actual shape of the content: the outline of a PNG with transparency, an SVG icon, or a shape cut out with clip-path. It has no spread or inset, but it is the only one that can cast a shadow for a non-rectangular object. Multiple shadows in filter are separated by spaces, not commas.
Switch the output format to “Figma”: the panel will split each layer into the four fields available in Effects—X, Y, Blur, Spread—and show the color and opacity percentage separately. The effect type is labeled too: Drop shadow for a regular layer, Inner shadow for inset. The top-to-bottom order in Figma is the same as in the CSS string.
The panel allows eight, but visually, the difference usually ends at five or six. Each layer is another rendering pass, which is noticeable in long lists of cards with shadows. Practical rule: use two or three layers for cards and buttons, and five or six for a large floating element such as a modal window.
No. A shadow takes up no space in the flow and does not move neighboring elements—unlike border and outline with a positive offset. So you can change it on hover without triggering a layout recalculation. Animating the shadow itself is still expensive: it is cheaper to keep a second layer with a ready-made shadow under the element and change its opacity.
Because rgba is easy to read: you can see that the alpha is 0.06 instead of having to interpret “ten hexadecimal digits.” Eight-digit hex works in all modern browsers, and if you need it, switch the output format to “CSS · hex”; the panel will recalculate the alpha automatically.
Calculates clamp() for a font size or spacing value between two viewport widths.
Open