Box-Shadow Generator
Build CSS box shadows visually with offset, blur, spread, color, opacity, inset, and preset controls.
Box shadows add depth and hierarchy to UI elements by simulating lighting and elevation. A well-tuned shadow can make a card, button, or modal feel more tangible and improve the overall visual hierarchy of your interface. This tool provides interactive sliders for horizontal offset, vertical offset, blur radius, spread, and shadow color — adjust each property and see the result in real time, then copy the generated CSS.
Use this box-shadow generator to build soft cards, elevated panels, buttons, and floating UI elements without writing CSS by hand. 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.
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.
Related Code Tools
Try these other tools in the same category.