Box Shadow Generator
Box Shadow Generator — chạy trên trình duyệt. Không lưu dữ liệu.
Tạo box-shadow
Nhập giá trị, rồi nhấn Tính.
Xem trước
Kéo thanh trượt thì CSS box-shadow cập nhật ngay.
Cách sử dụng
- Đặt vị trí bóng bằng thanh trượt hoặc số Lệch X và Lệch Y. Mặc định X 0, Y 8.
- Chỉnh Blur và Spread. Blur mặc định là 24.
- Khớp màu bóng và thanh độ mờ. Phần trăm độ mờ hiện bên cạnh.
- Bật inset cho bóng trong. Kiểm tra ngay trên hộp xem trước.
- Sao chép CSS phía dưới vào stylesheet. Đặt lại khôi phục mặc định.
Khái niệm chính
Trình tạo box-shadow dùng để tinh chỉnh box-shadow trên thẻ, nút và modal. X và Y là bóng lệch bao xa, blur là độ mềm mép, spread là diện bóng. Kết hợp màu và alpha cho bóng màu thương hiệu thay vì xám. CSS cập nhật ngay khi bạn kéo thanh.
Inset đặt bóng trong hộp, hợp ô nhấn hoặc bóng trong. Xem trước là hình chữ nhật bo trắng cho nền sáng. Tạo chỉ chạy trong trình duyệt. Màn hình này làm một lớp; để chồng bóng, nối giá trị đã chép bằng dấu phẩy.
Ví dụ
Mặc định Y 8, blur 24 và độ mờ 25% cho bóng xuống mềm. Tăng X và Y lên 12 làm bóng dưới-phải đậm hơn; bật inset đổi cùng giá trị thành bóng trong. Dán CSS đã chép vào selector. Danh sách thẻ thường tái sử dụng một bóng cho tầng lớp và cho modal blur lớn hơn. Trên nền tối bạn có thể cần alpha cao hơn xem trước trắng gợi ý. Đặt khai báo đã chép trong media query để giảm spread trên mobile. Khi thử lại cùng đầu vào, đặt lại rồi dán mới để đầu ra cũ không lẫn. Máy dùng chung: xóa ô khi xong. Đóng tab thì giá trị mất; không cần yêu cầu xóa trên máy chủ.
Liên quan: tạo gradient · bộ chọn màu
Câu hỏi thường gặp
Khi nào dùng inset trong CSS box-shadow?
Đó là bóng trong. Dùng cho bóng trong thẻ hoặc vẻ nút đang nhấn.
Giá trị box-shadow có gửi lên máy chủ không?
Không. Xem trước và chuỗi chỉ dựng trong trình duyệt.
Làm bóng chồng được không?
Công cụ này làm một lớp. Nối các khai báo đã chép bằng dấu phẩy cho nhiều lớp.
Độ mờ đi vào đâu?
Thành alpha của màu. Đọc phần trăm cạnh thanh trượt.
Spread và blur khác nhau thế nào?
Blur làm mềm mép; spread phóng to hoặc thu nhỏ kích thước bóng.
Đổi nền xem trước được không?
Xem trước là hộp trắng cố định. Kiểm tra lại trên nền trang thật của bạn.
Cập nhật lần cuối: 2026-09-04