Glassmorphism & Neumorphism Generator

Create stunning glass and soft UI effects with live CSS output

customize, preview, and copy the CSS

Background Color

#ffffff

Blur (10px)

Opacity (30%)

Border Radius (16px)

Border

Border Opacity (20%)

Drop Shadow

Preview Background

Glass Card

This is a sample glassmorphism card floating above a colorful gradient background. Adjust the sliders to see it change.

CSS Output

/* Glassmorphism Effect */
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);