Đổ bóng & kính mờ CSS
Bóng nhiều lớp mềm như thật và hiệu ứng kính mờ glassmorphism. Chọn mẫu, kéo vài thanh rồi sao chép CSS.
Đổ bóng
Kính mờ
Xem nhanh cách dùng
Câu hỏi thường gặp
Cách tạo box-shadow CSS đẹp?
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.
Bóng nhiều lớp là gì và vì sao đẹp hơn?
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.
Glassmorphism (kính mờ) là gì?
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.
Hiệu ứng kính mờ có chạy trên mọi trình duyệt không?
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 (inset) dùng khi nào?
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ó chỉnh được màu bóng không?
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.
Dùng thông số bóng trong Figma thế nào?
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 có làm website chậm không?
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.
Nền xem thử dùng để làm gì?
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ó mẫu bóng sẵn không?
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.
Công cụ có miễn phí không?
Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt.
Viền sáng trong chế độ kính mờ để làm gì?
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.
Công cụ cùng nhóm
Tất cả công cụ
Hút màu ở bất kỳ đâu, ra HEX, RGB, HSL, CMYKLấy màu trên màn hình
HEX, RGB, HSL, CMYK, OKLCH qua lạiĐổi mã màu
Chữ trên nền có đạt chuẩn WCAG khôngKiểm tra tương phản
Dải màu tuyến tính, toả tròn, xuất CSSTạo gradient CSS
Lấy dải màu gradient từ chính bức ảnhTạo gradient từ ảnh
Tạo dải 50–950 từ 1 màu, xuất CSS, TailwindThang màu & design token
Xem thiết kế qua mắt người mù màuMô phỏng mù màu