Glassmorphism CSS Generator

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

19.2Kuses

7.6/10(481)

Glassmorphism

Frosted glass effect

BG 1:

BG 2:

Glass:

Controls

Blur16px

Opacity0.15

Border Opacity0.20

Border Width1px

Shadow Opacity0.10

Border Radius16px

CSS Code

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 rgba(0, 0, 0, 0.1);

Recommended Products

📖Web Design BooksShop →🎨Color Reference GuidesShop →✏️Drawing TabletsShop →🎨Design SoftwareShop →🖥️Monitor CalibratorsShop →💻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.