Trình Tạo CSS Glassmorphism

Kiểm soát cường độ frosted glass từ 0-30px. Các giá trị cao hơn tạo ra hiệu ứng frosted không trong suốt hơn. Đối với hầu hết các thiết kế, các giá trị từ 8-15px hoạt động tốt nhất.

Điều chỉnh độ sống động của màu sắc xuyên qua kính từ 100-200%. Các giá trị trên 100% làm cho màu nền sống động hơn và tạo ra hiệu ứng kịch tính hơn.

Màu Sắc đặt màu tint của bảng kính. Độ Trong Suốt kiểm soát mức độ trong suốt của kính (0-100%). Các giá trị thấp hơn hiển thị nhiều nền hơn, trong khi các giá trị cao hơn (20-35%) cung cấp khả năng đọc văn bản tốt hơn.

Độ Rộng Viền & Độ Trong Suốt điều chỉnh cạnh nhìn thấy được của bảng kính bằng viền trắng bán trong suốt. Bán Kính Viền làm tròn các góc từ 0-50px để có thẩm mỹ mềm mại, hiện đại hơn.

Thêm độ sâu với bóng mềm bên dưới bảng kính. Các giá trị cao hơn tạo ra độ cao hơn và làm cho kính có vẻ nổi lên trên nền.

Glassmorphism sử dụng backdrop-filter: blur() làm mờ nội dung phía sau phần tử. Trên nền trắng đơn thuần, không có gì để làm mờ, vì vậy hiệu ứng vô hình.

Thuộc tính backdrop-filter được hỗ trợ trong tất cả các trình duyệt hiện đại bao gồm Chrome, Firefox, Safari và Edge. CSS được tạo bao gồm tiền tố -webkit-backdrop-filter cho các phiên bản Safari cũ hơn.

Để hỗ trợ trình duyệt cũ, hãy cân nhắc cung cấp dự phòng với nền bán trong suốt đặc bằng tính năng truy vấn @supports CSS.

Đối với hầu hết các thiết kế, độ mờ từ 8-15px hoạt động tốt và cung cấp vẻ ngoài frosted glass cổ điển.

• 5px hoặc ít hơn: Có thể không cung cấp đủ hiệu ứng frosting
• 8-15px: Điểm ngọt ngào cho hầu hết các thiết kế (được khuyến nghị)
• 20px+: Có thể làm cho kính trông quá không trong suốt

Giá trị lý tưởng phụ thuộc vào độ phức tạp nền của bạn và thẩm mỹ tổng thể mà bạn đang hướng tới.

Đảm bảo đủ độ tương phản bằng cách tuân theo các phương pháp hay nhất này:

• Tăng độ trong suốt nền lên 20-35% để có độ tương phản văn bản tốt hơn
• Sử dụng độ mờ đủ (10px+) để tạo tách biệt trực quan
• Văn bản trắng với text-shadow tinh tế hoạt động tốt trên hầu hết các hiệu ứng kính
• Văn bản tối hoạt động tốt hơn trên bảng kính màu sáng
• Kiểm tra khả năng đọc trên nội dung nền thực tế của bạn

Tính năng tải lên hình ảnh chỉ dành cho mục đích xem trước — nó giúp bạn kiểm tra cách hiệu ứng kính của bạn trông trên nội dung thực tế.

Trong triển khai, bạn sẽ áp dụng CSS được tạo cho các phần tử trên trang thực tế của bạn, nơi hiệu ứng kính sẽ làm mờ bất kỳ nội dung hoặc nền nào phía sau nó. Công cụ xem trước chỉ giúp bạn hình dung và tinh chỉnh hiệu ứng trước khi triển khai.

Thuộc tính backdrop-filter có thể tốn nhiều GPU, đặc biệt là với các giá trị mờ cao. Tuân theo các phương pháp hay nhất hiệu suất này:

• Sử dụng glassmorphism một cách tiết chế — trên các phần tử chính như thẻ hoặc thanh điều hướng
• Giữ các giá trị mờ hợp lý (dưới 20px) để hiển thị mượt mà
• Tránh áp dụng hiệu ứng kính cho mọi thành phần trên trang
• Kiểm tra hiệu suất trên các thiết bị cấp thấp hơn
• Cân nhắc vô hiệu hóa hiệu ứng trên di động nếu hiệu suất quan trọng