Box Shadow Generator
Create CSS box-shadow values visually and copy the code.
About the Box Shadow Generator
Create CSS box-shadow values with a live visual preview. Adjust offset, blur, spread, and color.
Private by design
Everything you type here is processed inside your browser. Nothing is sent to a server, logged or stored, so it is safe to use with real numbers, drafts and anything you would not paste into a hosted tool.
Try these next
- Color Converter Convert between HEX, RGB, RGBA, HSL, and HSLA color formats instantly. Built for designers and frontend developers building CSS variables, dark-mode palettes, and design tokens.
- Aspect Ratio Calculator Calculate aspect ratios and resize dimensions proportionally. Perfect for images, videos, and responsive design.
- Color Palette Generator Generate harmonious color palettes from a base color. Create complementary, analogous, and triadic color schemes.
- Gradient Generator Create CSS linear and radial gradients visually. Pick colors, adjust angles, and copy the CSS code.
Browse every tool or read the creator guides.
Questions people ask
How do I create a CSS box shadow?
Use the sliders to adjust horizontal offset, vertical offset, blur radius, spread radius, and color. The CSS code updates live and is ready to copy.
What is the box-shadow CSS property?
box-shadow adds shadow effects around an element's frame. It accepts values for horizontal/vertical offset, blur, spread, and color.
Can I add multiple box shadows?
The generator creates single shadow values. You can combine multiple values in your CSS by separating them with commas.