Generate CSS box shadow code online free with a live preview. Adjust offset, blur, spread, and color visually across multiple shadow layers, then copy the ready-to-use CSS snippet.
If this tool isn’t working as expected, please take a screenshot of the error and report the problem here so we can investigate and improve it.
Box shadow values are hard to visualize from numbers alone. Adjusting 0 4px 6px rgba(0,0,0,0.1) to look right requires guessing and checking.
A visual builder eliminates iteration and gets you to the right shadow immediately - and layering multiple shadows by hand is even harder to reason about without a live preview.
Add one or more shadows to a preview card - set horizontal and vertical offset, blur, spread, and color (including alpha, if you type an 8-digit hex value) for each shadow layer, toggle inset on or off per layer, then copy the finished box-shadow CSS property. There's no separate opacity slider - transparency comes from the color value itself.
Set X/Y offset, blur radius, spread, and color (including alpha via an 8-digit hex value).
See the shadow render on a card in real time.
Stack multiple shadow layers for complex effects.
Click copy to get the box-shadow CSS property.
Drag the offset, blur, and spread sliders, and pick a color, while watching the live preview update.
Check the Inset box on a layer to move that shadow inside the element instead of outside.
Click "+ Add Shadow Layer" to stack additional shadows - each layer gets its own full set of controls and can be removed independently.
Click Copy to get a single box-shadow declaration with every layer joined by commas, ready to paste into your stylesheet.
Best For
Input
Color field: #00000033Result
box-shadow: 4px 4px 10px 0px #00000033;The last two hex digits (33) are the alpha channel - there's no dedicated opacity slider, so semi-transparent shadows are set by typing an 8-digit hex value (or another color format) directly into the color text field.
Input
Two shadow layers: (4px, 4px, 10px, 0px, #00000033) and (0px, 8px, 16px, 0px, #00000022)Result
box-shadow: 4px 4px 10px 0px #00000033, 0px 8px 16px 0px #00000022;Each added layer appends its own comma-separated value to the single box-shadow declaration - there's no fixed limit in the UI beyond what's practical to configure by hand.
Input
Any shadow configurationResult
box-shadow: ...; only - no -webkit-box-shadow or -moz-box-shadowbox-shadow has been supported without prefixes in all modern browsers for years, so the tool doesn't add any.
Adjust sliders and watch the live preview instead of guessing pixel and blur values.
Stack two or three shadow layers with different offsets and opacities for a more realistic depth effect.
Add two layers - one lighter, offset up-left, one darker, offset down-right - and adjust the colors to match your background.
Problem
Solution
There isn't one - set transparency by typing an 8-digit hex value (or an rgba color) into the color field.
Problem
Solution
There are none - both effects are achievable by manually entering the right offset, blur, and color values yourself.
Problem
Solution
The tool only outputs the standard box-shadow property - no -webkit- or -moz- prefixes are added, since none are needed for modern browsers.
Problem
Solution
There's only a Copy button - no file download, Figma export, or CSS-variable output.
Type an 8-digit hex value (like #00000033) to get a semi-transparent shadow without a separate opacity control.
A tight, dark shadow plus a soft, lighter one usually looks more natural than a single shadow.
For a raised-surface illusion, the light and dark shadow colors both need to be derived from your actual background color.
The Copy button only captures the current state - re-copy after adjusting any layer.
Transparency is set only through the color field's alpha channel (an 8-digit hex value or another color format with alpha).
There's no one-click Material Design, neumorphism, or glow preset - every effect is built manually with the offset, blur, spread, color, and inset controls.
Only the standard box-shadow property is output - by design, since prefixes aren't needed in modern browsers.
Only a Copy button exists - there's no file export, Figma integration, Tailwind class output, or one-click reset to defaults.
The background swatch changes only the live preview - it isn't included in the copied CSS.
Both build a box-shadow visually, but only one includes ready-made effect presets.
| This Tool (Manual Controls, No Presets) | A Preset-Gallery Generator | |
|---|---|---|
| Material Design / neumorphism presets | None - configure the values yourself | Often one-click preset buttons |
| Multiple shadow layers | Yes - Add Shadow Layer button | Usually yes |
| Export formats | Copy CSS only | Often CSS, Tailwind, Figma, or CSS variables |
The most common question is about multi-layer shadows. This tool supports them directly - click "Add Shadow Layer" to stack a second shadow with its own offset, blur, spread, color, and inset setting on the same element, and the Copy button combines every layer into one comma-separated box-shadow declaration.
No. There's no separate opacity control - transparency is set through the color field itself, by typing an 8-digit hex value (the last two digits are the alpha channel) or another color format that supports alpha.
No. The tool only outputs the standard, unprefixed box-shadow property. box-shadow hasn't needed vendor prefixes in any modern browser for years, so none are added.
No. There are no one-click presets - you build both effects manually, using the offset, blur, spread, color, and inset controls on one or more shadow layers.
No. There's only a Copy button - no file download, Figma export, Tailwind class output, CSS-variable output, or reset-to-defaults button.
box-shadow: h-offset v-offset blur spread color; - all values required except spread and inset. h-offset: positive = right, negative = left. v-offset: positive = down, negative = up. blur: higher = softer (0 = sharp edge). spread: positive = larger shadow, negative = smaller. Example: box-shadow: 0 4px 12px rgba(0,0,0,0.15); - a common soft drop shadow. This tool's own sliders map directly to these values, one per shadow layer.
Add the 'inset' keyword at the start: box-shadow: inset 0 4px 8px rgba(0,0,0,0.2); - the shadow appears inside the element rather than outside. Inset shadows are used for pressed button states, input focus rings (dark backgrounds), and sunken panel effects. You can combine inset and outset shadows: box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 2px rgba(255,255,255,0.3); - this tool has an Inset checkbox on every shadow layer for exactly this.
Yes - separate each shadow value with a comma. They render in order from front to back. Example: box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03); - three layered shadows for a realistic elevation effect. This tool supports it directly - click "Add Shadow Layer" to add each additional layer.
box-shadow applies to the element's rectangular bounding box - it ignores transparency within the element. filter: drop-shadow(h v blur color) follows the actual visible shape of the element, including transparent areas. This matters for PNG images and SVGs where you want the shadow to follow the image silhouette instead of the rectangular container. drop-shadow is slower to render than box-shadow. This tool generates box-shadow only - it doesn't output filter: drop-shadow.
Neumorphism requires two shadows on the same element: one lighter than the background (top-left), one darker (bottom-right). Example for a gray #e0e5ec background: box-shadow: 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5); - adjust the shadow colors to match your specific background. The shadows must match the background color for the raised-surface illusion to work. This tool has no automatic neumorphism preset - add two shadow layers yourself and enter values like these.
Leave your email so we can prioritize similar tools and updates.
Trending tools will appear as visitors explore the catalog.
Your recently visited tools will show up here.