CSS Glassmorphism & Shadow Generator

Generate modern frosted-glass styling and smooth box-shadow effects. Adjust sliders for live preview and copy cross-browser CSS.

Background Blur: 12px

Backdrop Opacity: 0.25

Shadow Blur: 24px

Shadow Opacity: 0.15

Glass Card Preview

Adjust sliders to see real-time updates

Generated CSS

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.375);
box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.15);
border-radius: 12px;

Related Tools

SVG Pattern Builder Base64 Converter