🪟

Glassmorphism CSS Generator

Visual builder cho hiệu ứng glassmorphism (frosted glass). Chỉnh blur, độ trong, bão hoà, border, màu overlay. 4 background preset, copy CSS sẵn dùng. Phù hợp card hero, modal, navbar.

Tất cả công cụ Browser-only

Blur12px

Độ trong (alpha)0.25

Độ bão hoà180%

Border radius16px

Border opacity0.18

Màu nền (overlay)

Background

Glassmorphism

Beautiful frosted-glass UI in pure CSS. Adjust the sliders to taste, then copy.

CSS

Generator cho hiệu ứng glassmorphism (frosted glass). Hoạt động trên Chrome/Edge/Safari 9+. Firefox cần bật flag layout.css.backdrop-filter.enabled.

Glassmorphism là gì?

Hiệu ứng "frosted glass" — card mờ trong suốt với blur background phía sau. Phổ biến từ iOS 7 (2013), Big Sur (2020), Windows 11 Mica. Tạo cảm giác chiều sâu mà không nặng như shadow.

3 yếu tố chính

backdrop-filter: blur() — blur những gì phía sau element (không phải bản thân).
background: rgba() — màu nửa trong suốt để thấy được hiệu ứng blur.
border: rgba() — viền mờ giúp tách glass khỏi nền.

Browser support

✅ Chrome / Edge 76+
✅ Safari 9+ (iOS Safari 9+) — cần prefix -webkit-backdrop-filter
⚠️ Firefox: từ 103 (2022) hỗ trợ, nhưng cần check feature flag ở version cũ

Tips

Background phải có chi tiết (gradient, ảnh) — nếu solid color thì blur không nhìn thấy gì.
Blur 8-16px là sweet spot. Lớn hơn 30px trông giả.
Saturation 150-200% tăng độ sống động của màu phía sau, đặc trưng của iOS-style glass.
Hiệu suất: backdrop-filter nặng hơn filter — đừng dùng trong animation chạy 60fps.

Phù hợp với ai

Frontend dev, UI/UX designer, ai cần prototype visual nhanh hoặc sinh CSS chuẩn copy-paste cho dự án Tailwind/React/Vue.

Câu hỏi thường gặp

CSS sinh ra có dùng được với Tailwind không?

Có. Output là CSS chuẩn vanilla, paste vào file .css bất kỳ. Nếu dự án dùng Tailwind, có thể đặt vào layer @utilities hoặc theme override.

Có hỗ trợ trình duyệt cũ không?

Output dùng cú pháp CSS modern (custom properties, grid, gap). Hoạt động tốt trên Chrome/Firefox/Safari 2020+. IE11 KHÔNG được hỗ trợ.

Công cụ liên quan

Xem tất cả công cụ →

MỚI

🎨

Color Picker

Pick HEX/RGB/HSL, slider RGB, 12 màu mẫu, gợi ý tên Tailwind gần nhất.

MỚI

✨

CSS Animation Builder

Visual builder cho CSS animation. 10 preset (fadeIn, bounce, pulse, spin, shake…). Tinh chỉnh duration, easing, iteration.

MỚI

🪞

CSS Filter Builder

Visual builder cho CSS filter — blur, brightness, sepia, hue-rotate, drop-shadow. 8 preset (Vintage, Polaroid, Noir…).

MỚI

🎨

Color Palette Generator

Sinh bảng màu hài hoà từ màu chính (HSL theory). 6 hệ: Monochromatic, Analogous, Complementary, Triadic… + 10 shades.