Design & CSS

CSS Box Shadow & Glassmorphism Generator

Visually build CSS box-shadows, blur effects, and glassmorphism cards for web UIs.

Interactive Tool Workspace

In-Browser Execution • 100% Private

Offset X (0px)Offset Y (10px)

Blur (25px)Spread (-3px)

Preview Box

box-shadow: 0px 10px 25px -3px rgba(0, 0, 0, 0.15);

Step 1: Adjust sliders for X offset, Y offset, blur, spread, and shadow color.
Step 2: Copy generated CSS box-shadow code snippet.

Generates CSS property strings: box-shadow: offset-x offset-y blur spread color.

Yes, box-shadow is universally supported across modern web browsers.