Trình tạo CSS Box Shadow
Tạo box-shadow CSS nhiều lớp với thanh trượt trực tiếp cho offset, blur, spread, màu sắc, độ mờ và inset — xem trước trên phần tử thực và sao chép CSS sẵn dùng ngay lập tức.
box-shadow: —;
Tất cả cập nhật trực tiếp trong trình duyệt — không tải lên, không đăng ký, hoàn toàn miễn phí.
Giới thiệu về Trình tạo CSS Box Shadow
Công Cụ Tạo Đổ Bóng CSS (Box Shadow) cho phép bạn thiết kế đổ bóng một cách trực quan thay vì đoán giá trị trong mã. Kéo các thanh trượt cho độ lệch ngang và dọc, bán kính làm mờ, bán kính lan tỏa, màu sắc và độ mờ — cùng nút bật/tắt inset — và xem một phần tử thực cập nhật trực tiếp. Khi kết quả vừa ý, sao chép mã CSS sẵn sàng dán chỉ với một cú nhấp.
Các bóng đổ trong giao diện hiện đại hiếm khi chỉ là một lớp. Công cụ này hỗ trợ xếp chồng nhiều lớp bóng: thêm, nhân bản, ẩn hoặc xóa các lớp, và xem trước lớp đang chọn riêng lẻ hoặc tất cả các lớp kết hợp. Xếp một bóng tối sát bên dưới một bóng mềm rộng chính là cách các thẻ và nút bấm tinh tế có được chiều sâu.
Bạn cũng có thể tạo kiểu cho chính phần tử xem trước — màu hộp, bán kính viền và nền canvas — để bóng được đánh giá trong một bối cảnh thực tế, kể cả trên bề mặt tối. Bắt đầu từ một mẫu dựng sẵn, nhấn "Ngẫu nhiên hóa lớp" để lấy cảm hứng, và đặt lại bất cứ khi nào bạn muốn một khởi đầu sạch. Mọi thứ chạy trong trình duyệt của bạn.
Cách sử dụng Trình tạo CSS Box Shadow
- Điều chỉnh các thanh trượt cho độ lệch ngang, độ lệch dọc, độ mờ, độ lan tỏa, màu sắc và độ mờ, và bật "Bóng inset" nếu bạn muốn một bóng bên trong.
- Nhấp "Thêm lớp" hoặc "Nhân bản lớp" để xếp chồng các bóng, và chuyển chế độ xem trước giữa "Lớp này" và "Tất cả các lớp" để tinh chỉnh từng lớp.
- Điều chỉnh phần tử và canvas — màu hộp, bán kính viền và nền — để phần xem trước khớp với thiết kế thực của bạn.
- Áp dụng một mẫu dựng sẵn hoặc dùng "Ngẫu nhiên hóa lớp" nếu bạn muốn một điểm khởi đầu thay vì bộ thanh trượt trống.
- Sao chép toàn bộ quy tắc CSS (hoặc chỉ giá trị) và dán vào stylesheet của bạn.