Trình Tạo Glassmorphism CSS — Tạo Phần Tử UI Trong Suốt

Glassmorphism là phong cách thiết kế phổ biến với các phần tử bán trong suốt và hiệu ứng backdrop blur. Trình tạo của chúng tôi tạo code CSS hoàn chỉnh cho hiệu ứng glassmorphism.

Kỹ Thuật Glassmorphism

background: rgba(255, 255, 255, 0.1) cho độ trong suốt bán phần. backdrop-filter: blur(10px) cho hiệu ứng mờ trên nền. border: 1px solid rgba(255,255,255,0.2) cho viền nhẹ. box-shadow cho chiều sâu. Tất cả bốn kết hợp tạo ra hiệu ứng kính.

Yêu Cầu Cho Glassmorphism

Glassmorphism chỉ hoạt động với nền đầy màu sắc — trên nền trắng không ấn tượng. Dùng gradient hoặc ảnh làm nền. backdrop-filter được hỗ trợ rộng rãi trên trình duyệt (>94%) nhưng cần tiền tố -webkit- cho Safari.

Khả Năng Tiếp Cận

Kiểm tra độ tương phản văn bản trên các phần tử kính — văn bản trên nền bán trong suốt có khả năng đọc thay đổi tùy theo nội dung bên dưới. Thêm màu nền dự phòng cho trình duyệt không hỗ trợ backdrop-filter.