Keep at least 1 shadow layer.
Help
About this tool
Design CSS box shadows visually and grab the generated code in one click. Add up to five layers, each with its own horizontal and vertical offset, blur radius, spread radius, color, opacity and inset toggle, and reorder or remove layers to match the stacking you want. The live preview updates as you type and lets you tweak the preview element's border radius and background color so you can judge the effect on different surfaces. Pick from built-in presets like subtle, card, elevated and inset-pressed to compare options fast. The output is a standard box-shadow declaration you can paste straight into your stylesheet. Everything runs locally in your browser — nothing is uploaded.
How to use
- Pick a preset such as subtle, card, elevated or inset-pressed as a starting point.
- Adjust each layer's offset X, offset Y, blur radius, spread radius, color and opacity, and toggle inset for inner shadows.
- Use Add layer to stack up to five shadows, then reorder or remove layers with the arrow and trash buttons.
- Tune the preview element's radius and background color, then copy the generated box-shadow CSS into your stylesheet.
What do the five box-shadow parameters mean?
A box-shadow takes offset-x, offset-y, blur-radius, spread-radius and color. Offset-x and offset-y move the shadow horizontally and vertically (negative values move it left/up), blur-radius softens the edge, spread-radius grows or shrinks the shadow (negative values shrink it), and color sets the shadow color. An optional inset keyword turns the shadow inward.
How do multiple shadow layers work, and does their order matter?
You can list several shadows separated by commas in one box-shadow declaration. They are painted front to back in the order you write them, so the first shadow appears on top of the ones after it. Reordering layers therefore changes which shadow is visible where they overlap.
What is the inset keyword?
inset makes the shadow render inside the element's border box instead of outside it. It is commonly used for pressed buttons and inner wells. You can mix inset and normal layers in the same declaration.
Why is opacity adjusted separately instead of in the color picker?
The native color input only provides a solid hex color, so transparency is controlled with a separate slider. The generator combines them into an rgba(r, g, b, a) value in the output, letting you fade a shadow without changing its hue.
Is my shadow uploaded to a server?
No. The preview and code generation run entirely in your browser — nothing is sent anywhere.