Trình tạo Glassmorphism

(Tài liệu bằng tiếng Anh)

What it does

Create frosted-glass (glassmorphism) CSS - backdrop-blur, a translucent background, a subtle border, and a soft shadow. Tweak blur, opacity, tint, radius, border, and saturation, preview it live, and copy the full declaration block. 100% client-side.

How to use it

1. Adjust the sliders: Blur, Opacity, Border, Radius, Saturation.
2. Pick a Tint color.
3. Copy the CSS.

Examples

Blur 12, opacity 0.6, tint white, radius 16 →

background: rgba(255, 255, 255, 0.6);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

Good to know

• Private: generation is local.
• backdrop-filter needs a colorful or image background behind the element to show the effect.
• Related tools: Box-Shadow Generator, CSS Gradient Generator.