Công cụ tạo CSS Glassmorphism

Tạo Glassmorphism là gì?

Tạo hiệu ứng kính mờ (glassmorphism): một tấm nền trong mờ có màu phủ làm mờ và tăng bão hòa mọi thứ phía sau, với viền sáng và bóng mềm tùy chọn. Phần xem trước đặt thẻ lên các phông nền nhiều màu để bạn đánh giá hiệu ứng.

Cách sử dụng Tạo Glassmorphism

1. Chọn một mẫu: Kính mờ, Kính tối, Kính màu hoặc Nhẹ.
2. Chỉnh Độ mờ và Độ bão hòa nền phía sau.
3. Chọn Màu phủ và Độ đậm màu phủ, Độ đậm viền và Bán kính.
4. Bật/tắt Bóng đổ và thử các Nền phía sau khác nhau trong Cài đặt xem trước.
5. Sao chép mã CSS.

Ví dụ

Mẫu Kính mờ (độ mờ 10px, độ bão hòa 180%, trắng ở 0.25, viền 0.3, bán kính 16px, bật bóng đổ)

background: rgba(255, 255, 255, 0.25);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);

Khi nào nên dùng Tạo Glassmorphism

Dùng cho thẻ, thanh điều hướng và modal đặt trên ảnh hoặc gradient nhiều màu. Hiệu ứng chỉ hiện ra khi có gì đó phía sau phần tử; trên nền màu phẳng nó trông như một hộp trong mờ thông thường. Hãy kiểm tra độ tương phản của chữ, vì nền phía sau tấm kính thay đổi.

Tạo Glassmorphism hoạt động như thế nào

Nền của tấm là màu phủ ở độ đậm đã chọn (rgba()), và viền dùng cùng màu ở độ đậm viền. Độ mờ và độ bão hòa được đưa vào backdrop-filter: blur(px) saturate(%); saturate(100%) bị bỏ vì không thay đổi gì. Khai báo được viết hai lần, trước với tiền tố -webkit- mà Safari vẫn cần, sau đó không tiền tố. Nếu độ mờ bằng 0 và độ bão hòa 100%, không có backdrop-filter nào được viết.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Thanh điều hướng kính mờ trên ảnh banner
• ✓ Thẻ kính trên nền mesh gradient
• ✓ Hộp thoại modal vẫn giữ bối cảnh hiển thị
• ✓ Widget nhạc hoặc thời tiết
• ✓ Lớp phủ kính tối cho điều khiển video

Câu Hỏi Thường Gặp

Khám phá thêm danh mục