Glassmorphism Generator

Create stunning glassmorphism CSS effects with live preview. Control background blur, transparency, border, and shadow.

2.4Kuses

7.8/10(23)

Glassmorphism

Frosted glass effect

BG Color 1:

BG Color 2:

Glass Color:

Presets

Controls

Blur16px

Transparency0.15

Border Opacity0.20

Border Width1px

Shadow Opacity0.10

Border Radius16px

Generated CSS

background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);

Recommended Products

📖Web Design BooksShop →🖥️Developer MonitorsShop →🎨Color Reference CardsShop →⌨️Coding KeyboardsShop →📚Design BooksShop →💻Laptop StandsShop →🖱️Wireless MouseShop →🔌USB-C HubShop →👓Blue Light GlassesShop →🖥️Desk PadShop →

Affiliate Disclosure: As an Amazon Associate, ToolBird earns from qualifying purchases. Links above are affiliate links — if you buy through them, we may earn a small commission at no extra cost to you.

Disclaimer: This tool is provided as-is for informational and educational purposes only.