What is CSS Glassmorphism?

Glassmorphism is a UI design trend that emphasizes light or dark objects placed on top of colorful backgrounds, with a background blur applied.

Which CSS property is used?

The primary CSS property is backdrop-filter: blur() combined with a semi-transparent background-color.

CSS Glassmorphism Generator

Visual CSS Glassmorphism generator with customizable blur, transparency, and background styles.

Glass Controls

Adjust the properties of the glass element.

Glass Color

Blur: 10px

Opacity: 20%

Saturation: 150%

Border Width: 1px

Border Opacity: 10%

Shadow Blur: 30px

Live Preview

Glassmorphism

This is a live preview of your generated glass panel.

CSS Code

background: rgba(255, 255, 255, 0.20);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.10);

CSS Box Shadow Generator

Visual CSS box-shadow editor with sliders for offset, blur, spread, and color. Multiple shadows, ins…

HTML Entity Encoder

Encode and decode HTML entities. Named vs numeric toggle. Common entities reference table. Auto-dete…

CSS Border-Radius Shape Generator

8-point fancy blob and custom CSS border-radius generator. Organic blobs, pills, badges, leaves, liv…

CSS Box & Text Shadow Generator

Visual generator for CSS box-shadow and text-shadow. Multiple shadow layers, inset toggle, presets (…

JWT Decoder

Decode and inspect JWT (JSON Web Tokens) safely in your browser. View header, payload, and signature…

Crontab Explainer

Paste a cron expression and get a human-readable explanation. Shows next 5 run times. Color-coded fi…

Toolzium