Box Shadow Generator
// Create CSS box shadows with a visual editor
box-shadow: 4px 4px 10px 0px rgba(6, 182, 212, 0.5);
#About Box Shadow Generator
Free online CSS box shadow generator. Design box shadows visually and copy the ready-to-use CSS code. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.
#FAQ
How do I add a box shadow in CSS? ▾
Use the visual editor to set the horizontal offset, vertical offset, blur radius, spread radius, and shadow color. The tool generates the ready-to-use CSS box-shadow property value that you can paste into your stylesheet.
Can I add multiple box shadows to one element? ▾
Yes, CSS supports multiple comma-separated box-shadow values on a single element. You can layer shadows to create effects like glows, insets, and realistic depth by combining several shadow definitions.
</> Embed this tool ▾
Copy this code to embed the tool on your website. Adjust the height to fit your layout.
<iframe src="https://www.browserutils.dev/embed/box-shadow-generator" width="100%" height="500" frameborder="0" title="Box Shadow Generator"></iframe>