CSS Glassmorfisme-generator

Genereer CSS glassmorfisme-effecten met aanpasbare vervaging, transparantie, rand en achtergrondkleurknoppen.

Bedieningselementen

Vervaging10px

Transparantie0.25

Randdekking0.2

Achtergrondkleur

#ffffff

Live voorbeeld

Glassmorfisme

Matglas-effect

Gegenereerde CSS

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);

Ctrl+Enter uitvoerenCtrl+Shift+C kopiëren

Meer informatie

CSS Glassmorphism Generator: Create Frosted Glass Effects

Generate beautiful frosted-glass CSS with live preview. Adjust blur, opacity, and borders to create modern glassmorphism panels for your UI.

What Is Glassmorphism and Why It Works

Glassmorphism is a UI design trend built around frosted-glass surfaces that blur the background behind them. The effect creates a sense of depth and hierarchy by layering translucent panels over colorful backgrounds, giving interfaces a modern and polished look. Apple popularized this aesthetic in macOS and iOS, and it has since become a staple in dashboard designs, card layouts, and modal overlays across the web.

5 min lezenLees de volledige gids

Gerelateerde tools

Wist u dat?

Wachtwoordgenerator

Beveiliging

Genereer sterke, willekeurige wachtwoorden met aanpasbare lengte, tekensets en bulkgeneratie.

Wachtwoordgenerator

UUID-generator

Willekeurig getal generator