How to build a box-shadow with this CSS box shadow generator
A CSS box shadow generator builds the value of the box-shadow property from sliders, so you see the effect before you write any code. Choose a shape under Preset Shadows, or set Horizontal offset, Vertical offset, Blur radius, Spread radius, Color and Opacity for Layer 1, check the Live Preview, then click Copy under CSS Code. The starting output is box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);.
Every layer is written as offset-x, offset-y, blur, spread and colour, with inset in front when that box is ticked. Colour always comes out as rgba() because opacity is its own slider, and a zero is written without a unit. Add Layer stacks as many shadows as you want as one comma-separated list, with Layer 1 drawn on top. The tool writes box-shadow only, not text-shadow or the drop-shadow filter.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). To shape the box the shadow follows, set its corners with the border radius generator, fill it with the gradient generator, and pick the shadow colour with the color picker.
Table of Use: effects and the CSS the presets write
| Effect | Click | CSS written |
|---|---|---|
| Subtle card lift | Soft | 0 2px 8px 0 rgba(0, 0, 0, 0.1) |
| Raised panel or dropdown | Medium or Large | 0 4px 16px 0 rgba(0, 0, 0, 0.15) or 0 8px 32px 0 rgba(0, 0, 0, 0.2) |
| Pressed button or input well | Inset | inset 0 2px 4px 0 rgba(0, 0, 0, 0.2) |
| Focus ring that takes no layout space | Outline | 0 0 0 2px rgba(59, 130, 246, 1) |
| Glow around a button or badge | Glow | 0 0 20px 0 rgba(139, 92, 246, 0.6) |
| Soft-UI (neumorphic) button | Neumorphic, which also sets the preview box and background to the same grey | -8px -8px 16px 0 rgba(255, 255, 255, 0.8), 8px 8px 16px 0 rgba(163, 177, 198, 0.6) |
| Natural depth from three layers | Layered | 0 1px 2px 0, 0 4px 8px 0 and 0 8px 16px 0, each rgba(0, 0, 0, 0.1) |
| Two-layer, Material-style elevation | Material | 0 3px 6px 0 rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.23) |
| Coloured shadow under a card | Colored (negative spread keeps it narrow) | 0 10px 30px -5px rgba(245, 158, 11, 0.5) |
| Hard, retro offset shadow | Sharp | 4px 4px 0 0 rgba(0, 0, 0, 0.3) |
| Card with tight, tucked-in shadows | Card | 0 2px 4px -1px and 0 4px 8px -2px, each rgba(0, 0, 0, 0.1) |
Once the shadow is in your stylesheet, run the file through the CSS beautifier to tidy it or the CSS minifier to shrink it.
Features
- Unlimited layers. Add Layer appends a shadow with the starting values. A layer can be removed with its bin button, but at least one always stays. Reset returns to a single default layer. Layers cannot be reordered.
- Four length controls per layer. Horizontal offset, Vertical offset and Spread radius have sliders from -50 to 50px, and Blur radius from 0 to 100px. The number boxes accept -1,000 to 1,000px (blur 0 to 1,000px), rounded to two decimals.
- Colour and opacity. Use the colour swatch or type a hex value in #rgb or #rrggbb form, with or without the hash. A bad entry is flagged and the last good colour stays. Opacity runs from 0 to 100% in 1% steps.
- Inset per layer. The Inset shadow (inner shadow) checkbox switches one layer at a time, so outer and inner shadows can be mixed.
- 12 presets. Soft, Medium, Large, Inset, Outline, Glow, Neumorphic, Layered, Material, Colored, Sharp and Card, each shown as a small sample.
- Preview colours. Background and Box pickers let you test the shadow on your real colours. They are not part of the copied CSS.
- Copy. One click puts the full declaration on your clipboard, and a message appears if the browser blocks clipboard access.
Lay out the cards that carry these shadows with the CSS grid generator or the flexbox generator.
How to use the box shadow generator
- Click a sample under Preset Shadows to start from a known effect, or keep Layer 1 as it is.
- Drag Horizontal offset and Vertical offset to move the shadow, Blur radius to soften it and Spread radius to grow or shrink it. Type in the box for exact values.
- Set the Color and the Opacity slider. Tick Inset shadow (inner shadow) if the shadow should sit inside the box.
- Click Add Layer to stack a second shadow, then adjust it the same way. Use the bin button to remove one.
- Under Live Preview, change Background and Box to match your page.
- Click Copy under CSS Code and paste the declaration into your rule.
Who can use it
- Front-end developers who want a multi-layer shadow without counting commas by hand.
- UI designers turning elevation levels from a design file into CSS, then converting the colour codes they need.
- Students learning what offset, blur and spread each do, by moving one slider at a time.
- Site owners and marketers editing a landing page through a custom CSS box. Try the result in the HTML previewer first.
- Motion designers who plan to animate a hover shadow with the CSS animation generator.
FAQs
What do the numbers in a CSS box-shadow mean?
In order they are horizontal offset, vertical offset, blur radius, spread radius and colour, as in box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15). Positive offsets move the shadow right and down. Blur softens the edge and cannot be negative. Spread grows the shadow when positive and shrinks it when negative. The word inset in front moves the shadow inside the box.
How do I add more than one shadow to an element?
Separate the shadows with commas inside one box-shadow declaration. In this tool, click Add Layer for each extra shadow; CSS Code shows them as one comma-separated list. The first value is drawn on top and each later value is drawn underneath it, so Layer 1 is the topmost shadow. A tight, darker shadow over a wide, softer one usually looks the most natural.
How do I make an inner shadow in CSS?
Put the inset keyword at the start of the shadow. Tick Inset shadow (inner shadow) on a layer and the tool writes it for you, for example inset 0 2px 4px 0 rgba(0, 0, 0, 0.2). The shadow is then drawn inside the border, which gives a pressed or recessed look for input fields and toggled buttons. The Inset preset loads exactly that example.
What is the difference between box-shadow and drop-shadow in CSS?
box-shadow is drawn around the element’s box and follows its border-radius. The filter function drop-shadow() follows the visible pixels instead, including the transparent areas of a PNG or SVG. drop-shadow() has no spread value and no inset option. Use box-shadow for cards, buttons and other boxes, and drop-shadow() for icons and cut-out images. This generator writes box-shadow only.
What colour and opacity make a natural-looking shadow?
Black at 10 to 20 percent opacity, such as rgba(0, 0, 0, 0.1), is a safe default on light backgrounds; the Soft, Medium and Large presets use 10, 15 and 20 percent. A darker tint of the background colour looks more natural than grey, and saturated colours at higher opacity make glows on dark backgrounds. Use the preview Background and Box colours to test your real colours.
Can I animate a box shadow smoothly?
Yes. Add transition: box-shadow 0.3s ease to animate between two shadows on hover or focus. Keep the same number of layers and the same inset setting in both states so the browser can blend them. Animating box-shadow repaints the element on every frame, so for many elements it is cheaper to fade in a pseudo-element that already has the larger shadow.
Does box-shadow change the layout or the size of an element?
No. A shadow is painted outside the border box (or inside it, for inset) without taking up space, so it never pushes other elements or causes layout shifts. It can be clipped by a parent with overflow: hidden, so leave room or remove the clipping if the shadow looks cut off at the edge.
Is it safe to use this box shadow generator, and is anything uploaded?
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). There is no account, and the tool does not save your settings: reload the page and it returns to a single layer with box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15);.