Chuyển đến nội dung
Numio

Trình tạo Glassmorphism

Tạo bảng kính mờ bằng backdrop-filter. Tinh chỉnh độ mờ, độ trong suốt, độ bão hòa và viền trên nền trực tiếp, rồi sao chép CSS.

Xem trước trực tiếp

Kính mờ

Văn bản trên kính cần đủ độ tương phản với mọi phần của nền.

Nền chỉ dùng để xem trước và không được xuất.

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Mọi dữ liệu đều nằm trong trình duyệt của bạn.

Tài liệu tham khảo về định dạng

Trang công cụ được cập nhật: