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.
Glassmorphism
Beautiful frosted-glass UI in pure CSS. Adjust the sliders to taste, then copy.
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-filternặng hơnfilter— đừ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ụ →Color Picker
Pick HEX/RGB/HSL, slider RGB, 12 màu mẫu, gợi ý tên Tailwind gần nhất.
MỚICSS Animation Builder
Visual builder cho CSS animation. 10 preset (fadeIn, bounce, pulse, spin, shake…). Tinh chỉnh duration, easing, iteration.
MỚICSS Filter Builder
Visual builder cho CSS filter — blur, brightness, sepia, hue-rotate, drop-shadow. 8 preset (Vintage, Polaroid, Noir…).
MỚIColor 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.