BurnerTools
🌫️

CSS Box Shadow Generator

Design CSS shadows visually, copy production-ready code.

Design CSS box-shadows visually with live sliders for offset, blur, spread, opacity and color. Copy the exact CSS snippet — ready to paste into Tailwind, CSS Modules, or styled-components.

Category
Image & Design
Privacy
Runs in your browser
Uploads
No server upload
Access
Free, no signup
X offset0px
Y offset20px
Blur40px
Spread-10px
Opacity0.35
box-shadow: 0px 20px 40px -10px rgba(79, 70, 229, 0.35);
100% Private. Processed locally on your device. Your data never touches a server.

How to use

  1. 1Adjust the X / Y offset, blur, spread, and color sliders.
  2. 2Watch the preview update in real time.
  3. 3Copy the generated `box-shadow:` value to your stylesheet.

Popular use cases

  • →Quickly prototype card and button elevation styles.
  • →Build a layered shadow system (sm / md / lg / xl) for your design tokens.

Frequently asked questions

Can I stack multiple shadows?+

Yes — chain comma-separated shadow values in your CSS. Use the tool to design each layer, then concatenate.

More in Image & Design

🖼️
Image Resizer & Compressor

Scale & compress images locally with HTML5 Canvas.

📱
Premium QR Code Generator

Beautiful QR codes — 9 ready-to-download designs.

🎨
SVG to PNG / JPG Converter

Rasterize SVG to PNG or JPG at any resolution.

🎨
Hex to RGB & Color Palette Generator

HEX ↔ RGB ↔ HSL with auto-palette suggestions.