Màu sắc & Thiết kế
Trình tạo Glassmorphism
Frosted-glass UI cards with backdrop-filter.
Ghi chú của biên tập viên
Understanding · Frosted glass, in three CSS properties.
Chương phân tích chuyên sâu này hiện chỉ có sẵn bằng tiếng Anh. Công cụ chuyển đổi ở trên hoạt động bằng ngôn ngữ của bạn; bài viết giải thích dài chưa được dịch.
Các câu hỏi thường gặp
Quick answers.
›Which CSS property creates the glass effect?
The primary property is `backdrop-filter: blur()`, which applies the blur to the area behind the element rather than the element itself. This is usually paired with a semi-transparent `background-color` using RGBA or HSLA values.
›Does this work in all browsers?
Most modern browsers support `backdrop-filter`. Firefox occasionally requires the `layout.css.backdrop-filter.enabled` flag to be set to true in older versions, so including a fallback background colour is recommended.
›Why does the blur not appear in my project?
Ensure the element has a transparent or semi-transparent background. If the background is fully opaque, the blur effect happening behind the element will be hidden from view.
›Can I use this for production UI components?
Yes. Glassmorphism is a common design pattern for cards, navigation bars, and modals. The generated CSS is standard-compliant and ready for use in any stylesheet.
Mọi người cũng tìm kiếm
Công cụ liên quan
More in this room.
- Trình tạo GradientGradient CSS tuyến tính, xuyên tâm và hình nón.
- Trình tạo Box ShadowTrình chỉnh sửa box-shadow CSS trực quan.
- Trình tạo Border RadiusTrình chỉnh sửa border-radius CSS từng góc.
- Trình chỉnh sửa Cubic BezierThiết kế các đường cong easing CSS trực quan.
- Trình tạo hoạt ảnh CSSTạo khung hình chính trực quan, sao chép CSS sẵn sàng dán.
- Trình tạo bộ lọc CSSXem trước trực tiếp độ mờ, độ sáng, xoay màu và hơn thế nữa.