Trình tạo CSS box-shadow

Trình tạo CSS box-shadow là gì?

Trình tạo CSS box-shadow là một trình chỉnh sửa trực quan miễn phí cho thuộc tính box-shadow của CSS, dành cho các nhà phát triển front-end và nhà thiết kế. Thêm một hoặc nhiều lớp bóng và tinh chỉnh offset-x, offset-y, bán kính làm mờ, bán kính lan tỏa, màu sắc và cờ inset của từng lớp bằng các ô nhập số đơn giản và một bộ chọn màu. Một ô xem trước trên nền bàn cờ hiển thị kết quả kết hợp theo thời gian thực, và khai báo box-shadow đầy đủ — phân tách mỗi lớp bằng dấu phẩy — được tạo để bạn sao chép. Hãy dùng nó để tạo bóng nâng mềm mại, neumorphism sắc nét, hiệu ứng phát sáng, hoặc chiều sâu phân lớp kiểu Material mà không cần ghi nhớ thứ tự các giá trị.

Cách sử dụng Trình tạo CSS box-shadow

1. Đặt offset-x và offset-y của lớp đầu tiên (tính bằng px) để di chuyển bóng theo chiều ngang và dọc; giá trị âm di chuyển nó sang trái hoặc lên trên.
2. Điều chỉnh bán kính làm mờ (bóng mềm đến mức nào) và bán kính lan tỏa (nó lớn lên hay co lại bao nhiêu).
3. Chọn một màu bằng ô màu mẫu hoặc nhập giá trị thập lục phân — một giá trị thập lục phân 8 chữ số như #00000040 đặt độ trong suốt của bóng.
4. Đánh dấu hộp kiểm inset để vẽ bóng bên trong phần tử thay vì bên ngoài.
5. Nhấp Thêm lớp để xếp chồng thêm một bóng lên trên, rồi sắp xếp lại bằng cách chỉnh sửa giá trị; xóa bất kỳ lớp nào bằng nút thùng rác của nó.
6. Theo dõi bản xem trước cập nhật, rồi sao chép CSS box-shadow đã tạo vào bảng định kiểu của bạn.

Ví dụ

x 0, y 4, làm mờ 12, lan tỏa 0, màu #00000040

box-shadow: 0px 4px 12px 0px #00000040;

Lớp 1: 0 1 2 0 #0000001a · Lớp 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset đã chọn, x 0, y 2, làm mờ 6, lan tỏa 0, màu #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

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

Thứ tự các giá trị của box-shadow là gì?

Mỗi lớp được viết dưới dạng offset-x, offset-y, bán kính làm mờ, bán kính lan tỏa, màu sắc, với một từ khóa inset tùy chọn ở phía trước. Công cụ này luôn xuất ra cả bốn độ dài bằng px (offset-x, offset-y, làm mờ, lan tỏa) nên thứ tự rõ ràng, không mơ hồ và dễ tinh chỉnh thủ công về sau.

Tôi có thể thêm bóng bán trong suốt hoặc có màu không?

Có. Nhập bất kỳ màu CSS nào vào ô màu — một giá trị thập lục phân đầy đủ 8 chữ số như #00000040 (hai chữ số cuối là alpha) cho ra bóng bán trong suốt, và bạn có thể dùng màu có tên hoặc bất kỳ giá trị thập lục phân nào. Ô màu mẫu của bộ chọn xử lý các màu đặc #rrggbb; với alpha, hãy chỉnh sửa ô văn bản.

Làm thế nào để xếp chồng nhiều bóng?

Nhấp Thêm lớp cho mỗi bóng bổ sung. CSS được tạo phân tách mỗi lớp bằng dấu phẩy theo thứ tự, từ trên xuống dưới — lớp đầu tiên được vẽ sau cùng (ở trên cùng). Hãy dùng điều này cho chiều sâu phân lớp kiểu Material hoặc để kết hợp một vầng sáng bên ngoài với điểm nhấn inset.

Hộp kiểm inset có tác dụng gì?

Inset vẽ bóng bên trong viền của phần tử, tạo ra vẻ ngoài lõm vào hoặc phát sáng bên trong thay vì bóng đổ bên ngoài. Đánh dấu nó theo từng lớp; bạn có thể trộn lẫn bóng inset và bóng bên ngoài trong cùng một giá trị box-shadow.

Dữ liệu của tôi có được tải lên đâu đó không?

Không. Trình tạo chạy hoàn toàn trong trình duyệt của bạn bằng JavaScript — màu sắc và giá trị của bạn không bao giờ được gửi đến máy chủ, nên nó hoạt động riêng tư và thậm chí ngoại tuyến sau khi trang đã được tải một lần.