Box-Shadow Generator
Build CSS box shadows visually with offset, blur, spread, color, opacity, inset, and preset controls.
Use this box-shadow generator to build soft cards, elevated panels, buttons, and floating UI elements without writing the CSS by hand. It gives frontend developers a faster way to test shadow depth, blur, spread, and opacity in a real preview before copying the final value.
If you are designing for a design system or refining component states, start with a preset and then tune the shadow until it feels right across both light and dark surfaces. The live preview makes it easier to judge whether a shadow looks clean, subtle, or too heavy before you ship it.
Shadow Controls
Preview
How to Use
Follow these quick steps to get the result you need.
Adjust the sliders and color controls to shape the shadow you need.
Try a preset to jump to common elevation styles and fine-tune from there.
Preview the shadow on the sample card and copy the generated CSS.