Công cụ tạo CSS Box Shadow
Tạo CSS box-shadow trực quan: xếp nhiều lớp bóng, chỉnh độ lệch, độ mờ, độ lan, inset và độ trong suốt RGBA, xem trước trực tiếp và sao chép mã gọn gàng.
Mẫu có sẵn
Lớp
Cài đặt xem trước
Xem trước
box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.25);
Công cụ Liên quan
Xem Tất cảTạo CSS Box Shadow là gì?
Trình chỉnh sửa trực quan cho thuộc tính CSS box-shadow. Bạn có thể xếp nhiều lớp bóng, đặt riêng cho từng lớp độ lệch, độ mờ, độ lan, màu, độ trong suốt và cờ inset, rồi xem kết quả trên một hộp mẫu trong khi công cụ viết mã CSS tương ứng.
Cách sử dụng Tạo CSS Box Shadow
- Chọn một mẫu có sẵn (Mềm, Nhiều lớp, Sắc nét, Phát sáng, Bên trong, Viền vòng) hoặc bắt đầu từ bóng mặc định.
- Chọn một lớp và chỉnh Độ lệch ngang, Độ lệch dọc, Độ mờ, Độ lan, Màu bóng và Độ trong suốt; đánh dấu Bên trong (inset) để tạo bóng trong.
- Dùng Thêm lớp / Xóa lớp để dựng bóng nhiều lớp; các lớp được liệt kê theo thứ tự vẽ.
- Đổi màu nền, màu phần tử và bán kính trong Cài đặt xem trước để đánh giá bóng trong bối cảnh thực.
- Sao chép mã CSS được tạo.
Ví dụ
Một lớp: x 10px, y -5px, độ mờ 20px, độ lan 3px, màu #3b82f6, độ trong suốt 1, bật Inset
box-shadow: inset 10px -5px 20px 3px #3b82f6;
Khi nào nên dùng Tạo CSS Box Shadow
Dùng để thiết kế độ nổi cho thẻ, vòng focus, hiệu ứng phát sáng hoặc bóng trong cho bất kỳ phần tử HTML nào. Với bóng cho chữ, hãy dùng công cụ tạo Text Shadow, còn với bóng bám theo hình dạng PNG trong suốt hoặc phần tử bị clip, hãy dùng filter: drop-shadow() (công cụ tạo CSS Filter), vì box-shadow luôn bám theo khung viền của phần tử.
Tạo CSS Box Shadow hoạt động như thế nào
Mỗi lớp trở thành một giá trị box-shadow theo thứ tự [inset] x y blur spread color. Độ dài được viết bằng px (số không viết là 0 không đơn vị). Thanh trượt độ trong suốt được nhân với alpha sẵn có của màu: màu đục hoàn toàn được viết dạng hex, màu trong mờ dạng rgba(r, g, b, a). Nhiều lớp được nối bằng dấu phẩy, mỗi lớp một dòng; lớp đầu tiên được vẽ trên cùng. Độ mờ không thể âm, độ lan thì có thể.
Các Trường Hợp Sử Dụng Phổ Biến
- Độ nổi nhiều lớp kiểu Material cho thẻ và modal
- Vòng focus dễ tiếp cận bằng bóng chỉ có độ lan (0 0 0 3px)
- Bóng trong cho nút đang nhấn và ô nhập liệu
- Hiệu ứng phát sáng màu quanh nút kêu gọi hành động
- Bóng lệch sắc nét cho thiết kế neo-brutalism
Câu Hỏi Thường Gặp
Nhiều bóng được vẽ theo thứ tự nào?
Bóng đầu tiên trong danh sách được vẽ trên cùng và bóng cuối cùng ở dưới cùng. Công cụ viết các lớp theo thứ tự hiển thị trong bảng Lớp.
Độ mờ và độ lan khác nhau thế nào?
Độ mờ làm mềm mép bóng (không thể âm). Độ lan làm bóng to ra hoặc nhỏ lại trước khi làm mờ; độ lan âm làm bóng nhỏ hơn phần tử.
Tôi còn cần -webkit-box-shadow không?
Không. box-shadow không tiền tố đã được mọi trình duyệt hỗ trợ hơn một thập kỷ, nên công cụ chỉ xuất thuộc tính chuẩn.
Vì sao bóng không xuất hiện quanh ảnh trong suốt của tôi?
box-shadow bám theo khung chữ nhật của phần tử (kể cả border-radius), không theo các điểm ảnh hiển thị. Hãy dùng filter: drop-shadow() cho trường hợp đó.