ShadowBox generates CSS box-shadow effects with a visual editor. Adjust offset, blur, spread, and color to create the perfect shadow. Preview the result live and copy production-ready CSS code.
Use the sliders to adjust shadow offset, blur radius, spread, and color. Toggle between outer and inner shadows. Add multiple layers to create complex shadow effects. Preview animations and export to CSS, SCSS, Tailwind, React, or Svelte.
Yes! Use the Animation Preview section to apply pulse, float, shake, rotate, or bounce animations to your shadow box. Adjust the duration to fine-tune the effect.
You can add up to 8 shadow layers. Each layer has independent controls for offset, blur, spread, color, and inset. Drag layers to reorder them.
ShadowBox exports to CSS, SCSS, Tailwind CSS (arbitrary values), React/JSX inline styles, and Svelte. Click the Export button to see all formats.
Yes! ShadowBox is completely free with no signup required. Your data stays in your browser.