Trình tạo đổ bóng CSS (box-shadow)

Công cụ này làm gì

Trình tạo đổ bóng cho phép bạn thiết kế bóng CSS bằng mắt rồi sao chép khai báo box-shadow hoàn chỉnh. Xếp chồng bao nhiêu lớp tùy ý, đặt độ lệch, độ mờ, độ lan, màu và độ mờ đục cho từng lớp, chuyển thành bóng trong, và bản xem trước cập nhật ngay lập tức. Bạn cũng có thể dán một giá trị box-shadow có sẵn để chỉnh sửa trực quan. Mọi thứ chạy trong trình duyệt của bạn.

Cách sử dụng

1. Bắt đầu từ một mẫu có sẵn hoặc giữ bóng ví dụ.
2. Chọn lớp bằng các nút Lớp, hoặc dùng + Thêm lớp để xếp thêm một lớp lên trên.
3. Kéo Độ lệch ngang, Độ lệch dọc, Độ mờ và Độ lan, chọn Màu và giảm Độ mờ đục cho mềm hơn. Bật Bóng trong để có bóng hướng vào trong.
4. Chỉnh Màu hộp, Nền và Bo góc của bản xem trước cho khớp với trang của bạn. Chúng chỉ ảnh hưởng đến bản xem trước.
5. Sao chép mã từ thẻ CSS.

Ô CSS box-shadow ở dưới cùng có thể chỉnh sửa: dán bóng từ stylesheet hoặc công cụ thiết kế, các điều khiển sẽ tự đọc theo. Độ dài theo rem hoặc em được đổi sang px với 16px.

Ví dụ

.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}

Mẹo để có bóng tự nhiên

• Độ mờ đục thấp. Màu đen 5–25% trông chân thực; bóng tối đặc trông nặng nề.
• Độ lan âm giữ cho vệt mờ lớn không tràn ra hai bên — đây là mẹo của hầu hết bóng kiểu “thẻ”.
• Tô màu cho bóng. Bóng có chút sắc độ của nền hoặc thương hiệu trông phong phú hơn màu xám thuần.
• Ánh sáng từ một phía. Giữ độ lệch dọc dương ở mọi lớp để tất cả bóng thống nhất về hướng sáng.
• Hiệu năng. Độ mờ lớn trên nhiều phần tử có thể làm cuộn chậm trên điện thoại cấu hình thấp; hãy tạo hiệu ứng bằng opacity hoặc transform thay vì chính bóng.