🟦

CSS Box Shadow Generator

Generate CSS box shadow effects visually with a live preview. Control offset, blur, spread, and color to create perfect shadows and copy the CSS code instantly.

How to Use CSS Box Shadow Generator

Adjust the shadow sliders

Use sliders to control the horizontal offset, vertical offset, blur radius, and spread radius.

Pick a shadow color

Choose the shadow color and adjust its opacity for subtle or dramatic effects.

Copy the CSS code

Copy the generated box-shadow CSS property and paste it into your stylesheet.

Frequently Asked Questions

What is CSS box-shadow?▼

CSS box-shadow adds shadow effects around an element's frame. You can set horizontal and vertical offset, blur radius, spread radius, color, and whether the shadow is inset or outset.

Can I add multiple shadows to one element?▼

Yes, CSS allows multiple box shadows on a single element separated by commas. This lets you create layered shadow effects and complex visual styles.

What does the inset keyword do?▼

Inset changes the shadow from being outside the element to inside it, creating a depressed or inner glow effect rather than a raised shadow.

Related Tools

🎨

CSS Gradient Generator

Create CSS gradients with live preview — free

🎨

Color Picker

Pick colors and convert HEX, RGB, HSL

{ }

JSON Formatter & Validator

Format, validate & minify JSON instantly

🔗 Share this tool:

💬WhatsApp 📘Facebook 🐦X / Twitter 💼LinkedIn ✈️Telegram