Đổ bóng & kính mờ CSS

Chọn chế độ Đổ bóng, bắt đầu từ Mẫu nhanh rồi kéo các thanh lệch ngang, lệch dọc, độ nhoè, độ lan và độ đậm. Mã CSS cập nhật ngay để bạn sao chép.

Là nhiều lớp bóng nhỏ chồng lên nhau với khoảng cách tăng dần. Cách này cho bóng mềm và giống bóng thật hơn một lớp bóng lớn.

Là hiệu ứng khung nửa trong suốt làm mờ phần nền phía sau như tấm kính mờ, dùng thuộc tính backdrop-filter trong CSS.

backdrop-filter chạy trên Chrome, Edge, Safari và Firefox bản mới. Công cụ đã kèm tiền tố -webkit- cho Safari.

Bóng trong tạo cảm giác lõm vào, hợp cho ô nhập liệu, nút đang được nhấn hoặc hiệu ứng neumorphism.

Có. Bóng dùng màu tối nhẹ ngả theo màu nền thường tự nhiên hơn bóng đen thuần.

Thêm Drop shadow trong Figma và nhập X, Y, Blur, Spread, độ đậm giống công cụ. Kính mờ tương ứng với hiệu ứng Background blur.

Bóng CSS nhẹ, nhưng quá nhiều lớp bóng lớn trên danh sách dài có thể làm cuộn trang kém mượt. Hãy dùng bóng vừa đủ cho thành phần quan trọng.

Bạn đổi nền phía sau thẻ mẫu để xem bóng và kính mờ hiển thị thế nào trên nền sáng, nền tối hay nền nhiều màu.

Có, phần Mẫu nhanh gồm các kiểu bóng phổ biến để bạn bấm thử rồi tinh chỉnh.

Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt.

Viền sáng mảnh giúp khung kính tách khỏi nền và trông giống cạnh kính thật hơn, đặc biệt trên nền tối.