Box Shadow Generator

Create CSS box shadows with real-time preview. Fine-tune every parameter.

Presets

Offset X: 0px

Offset Y: 8px

Blur: 24px

Spread: 0px

Opacity: 30%

Color & Options

Inset

Show Tailwind

CSS

box-shadow: 0px 8px 24px 0px rgba(168, 85, 247, 0.30);

Tailwind CSS

<div class="shadow-[0px_8px_24px_0px_rgba(168,85,247,0.30)]">
  ...
</div>

Explore more Goodies

Other free tools from Eguth Studio you might enjoy.

Generate glassmorphism effects with backdrop-blur, opacity and saturation controls.

Create stunning text effects — gradient text, stroke, neon glow, long shadow, retro 3D and emboss.

Combine CSS filters visually — blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia and invert with real-time preview.

Create complex CSS clip-path shapes visually. Drag points, choose presets and export polygon, circle, ellipse or inset clip-paths.

Transform screenshots into stunning visuals with browser frames, device mockups, gradient backgrounds and export in multiple formats.

Generate harmonious color palettes from a base color. Export hex codes instantly.