Chuyển đến công cụ
JoeLucky

Nhấn ★ trên công cụ để lưu lại

Danh mục công cụ

Mã nguồn thành ảnhTạo gradient CSSGlassmorphism CSSTạo box-shadowTạo loader CSSTạo blob SVGSVG sang PNGKiểm tra độ tương phản màuChuyển đổi PX / REM / EM
JoeLucky

Công cụ trực tuyến thiết thực, tất cả trong một nơi

Chính sách quyền riêng tưĐiều khoản dịch vụ

© 2026 JoeLucky®. Bảo lưu mọi quyền.

  1. JoeLucky
  2. /CSS và thiết kế
  3. /Glassmorphism CSS

Glassmorphism CSS

Tạo mã làm mờ nền và viền trong suốt theo thời gian thực.

Cài đặt hiệu ứng

#FFFFFF
Độ trong suốt của nền15%
Độ mờ nền10px
Độ bão hòa180%
Độ trong suốt của viền30%
Bán kính bo góc16px
Độ trong suốt của bóng10%
Nền xem trước
Xem trước trực tiếp
CSS
background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);

💡 Mẹo

  • Kết quả tốt nhất: độ trong suốt 10–25%, độ mờ 5–15px
  • Đã kèm tiền tố -webkit-backdrop-filter để tương thích Safari
  • Nếu hiệu ứng trông nhạt, hãy đảm bảo phần tử cha có nền nhiều màu
  • Độ bão hòa 180% giữ màu phía sau lớp kính luôn tươi

CSS VÀ THIẾT KẾ TƯƠNG TỰ

Xem tất cả
Mã nguồn thành ảnh

Biến đoạn mã thành ảnh chụp màn hình đẹp mắt.

Mở →
Tạo gradient CSS

Thiết kế gradient tuyến tính, tỏa tròn và conic bằng giao diện trực quan, sao chép CSS ngay.

Mở →
Tạo box-shadow

Tạo bóng đổ mượt, nhiều lớp với bản xem trước tương tác.

💬 Bình luận

?

Chưa có bình luận nào. Hãy là người đầu tiên!

Glassmorphism CSS LÀ GÌ?

Tinh chỉnh độ mờ đục, làm mờ, độ bão hòa và viền để xem trước thẻ kính mờ theo thời gian thực, rồi sao chép CSS, bao gồm backdrop-filter.

Cách sử dụng

  1. Bảng bên trái có 7 điều khiển: độ mờ đục, làm mờ, độ bão hòa, độ mờ đục viền, bán kính viền, bóng và bộ chọn màu — tất cả cập nhật thẻ xem trước ngay lập tức.
  2. Kết quả tốt nhất: độ mờ đục 10–25% và làm mờ 5–15px. Hai tham số này ảnh hưởng nhiều nhất đến hiệu ứng kính mờ.
  3. Tăng độ bão hòa lên 180% để màu sống động phía sau kính; độ mờ đục viền thêm một viền sáng nhẹ cho thẻ.
  4. Nhấp 6 mẫu nền (Tím, Đại dương, Hoàng hôn, v.v.) để thử hiệu ứng kính trên các chuyển sắc khác nhau.
  5. Nhấp “Sao chép CSS” để có mã sẵn sàng cho môi trường thật gồm cả backdrop-filter và -webkit-backdrop-filter (tương thích Safari).

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

Hiệu ứng glassmorphism được tạo ra thế nào?

Bằng backdrop-filter: blur() để làm mờ nền, một background-color bán trong suốt và một đường viền mảnh.

Có được hỗ trợ ở mọi trình duyệt không?

Được hỗ trợ tốt trên Chrome, Edge và Safari. Firefox cần cờ thử nghiệm. Hãy thêm tiền tố -webkit- cho chắc.

Tôi có thể xem trước theo thời gian thực không?

Có. Mọi điều chỉnh thanh trượt hay màu đều cập nhật bản xem trước ngay lập tức.

Mở →