What does this tool do?
The Box Shadow Generator lets you build CSS box-shadow values visually with sliders and see the result instantly in a live preview. It is perfect for designers, frontend developers and anyone who wants polished shadows without writing code by hand.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
How it works
You adjust the horizontal (X), vertical (Y), blur, spread and opacity sliders, and the tool turns them into a valid box-shadow rule using an rgba color. You can stack up to four shadow layers, each with its own color and values, to build layered depth effects. The inset option produces shadows that fall inside the box instead of outside. Change the colors of the preview box and the background to test how the shadow will look in your actual design before copying it.
Presets and usage
Six one-click presets — Soft, Hard, Elevated, Inset, Glow (Blue) and Glow (Purple) — give you a quick starting point. The generated code follows the format 'box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.25);' and the copy button drops it straight into your CSS. It is handy for adding depth to cards, buttons, modals and dropdown menus, or for highlighting an element with a colored glow.
Frequently asked questions
How many shadow layers can I add?
You can add up to four layers. Each layer has its own X, Y, blur, spread, color, opacity and inset settings, and they are joined with commas in the output.
What does the inset option do?
Inset makes the shadow fall inside the element instead of outside, which is useful for pressed-button, recessed or inner-glow effects.
Why is the color output as rgba?
Your chosen hex color is combined with the opacity percentage and converted to an rgba value, so you can control the shadow's transparency independently.
Is Box Shadow Generator free?
Yes. Box Shadow Generator and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. Box Shadow Generator works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.