Thiết kế / CSS

Trình tạo CSS Glassmorphism (Hiệu ứng kính mờ)

Tạo giao diện kính mờ bằng CSS backdrop-filter: điều chỉnh độ mờ, màu phủ, độ trong suốt, độ bão hòa, viền và bán kính góc trên nền xem trước nhiều màu, rồi sao chép CSS hoạt động trên mọi trình duyệt hiện đại.

Trình tạo CSS Glassmorphism (Hiệu ứng kính mờ): backdrop-filter: blur() làm mờ mọi thứ phía sau phần tử, còn saturate() làm cho các màu đó rực rỡ hơn. Nền bán trong suốt tạo màu phủ cho hiệu ứng kính, còn viền sáng mờ làm nổi bật mép, giống như kính thật. Dòng có tiền tố -webkit- hỗ trợ Safari trước phiên bản 18. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.

Danh mục
Công cụ lập trình viên
Lượt chạy
Trong trình duyệt của bạn
Chi phí
Miễn phí · không cần đăng ký
Trạng thái khả dụng
Sẵn sàng sử dụng
Trình tạo hiệu ứng kính mờXử lý cục bộ

Chạy hoàn toàn trong trình duyệt của bạn

Kính mờMàu sắc phía sau thẻ này được làm mờ.

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

Hiệu ứng này cần có thứ gì đó nhiều màu sắc phía sau phần tử: backdrop-filter làm mờ mọi thứ bên dưới, còn nền bán trong suốt cho phép chúng hiện xuyên qua. Dòng -webkit- dành cho Safari trước phiên bản 18. Hãy kiểm tra để văn bản trên lớp kính có đủ độ tương phản trên mọi phần của nền.

Khả năng tiếp cận

Một số người dùng bật chế độ giảm độ trong suốt trong cài đặt hệ thống. Media query prefers-reduced-transparency, được các trình duyệt dựa trên Chromium hỗ trợ, có thể thay lớp kính bằng nền đặc cho họ.

Kết hợp với bóng

Một bóng mềm và rộng làm thẻ nổi lên khỏi nền; hãy tinh chỉnh bóng bằng trình tạo box shadow, rồi thay dòng box-shadow.

Cách sử dụng

  1. Thiết lập độ mờ, độ trong suốt và độ bão hòa.
  2. Chọn màu phủ, viền và bán kính góc.
  3. Sao chép CSS rồi đặt phần tử lên trên một nền nhiều màu.

Quyền riêng tư và giới hạn

Mọi thứ đều chạy trong trình duyệt của bạn.

Công cụ liên quan

Đổ bóng hộpGradient CSSMẫu CSS

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

Tại sao hiệu ứng kính của tôi trông đơn điệu?

Phía sau phải có thứ gì đó nhiều màu hoặc có chi tiết; trên một màu phẳng, hiệu ứng mờ không có gì để làm mờ.

backdrop-filter có chậm không?

Tính năng này tốn tài nguyên hơn hầu hết CSS khác, đặc biệt khi các vùng lớn cuộn trên nội dung chuyển động; hãy giữ vùng làm mờ ở kích thước nhỏ và tránh xếp chồng quá nhiều vùng.

Văn bản có dễ đọc không?

Hãy kiểm tra: độ tương phản thay đổi theo nền. Màu phủ tối hơn, độ trong suốt cao hơn hoặc bóng văn bản có thể giúp cải thiện khả năng đọc.

Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản