Trình tạo Box Shadow
Công cụ tạo box shadow này tạo CSS box-shadow bằng thanh trượt cho offset X và Y, blur, spread, màu, độ mờ và inset, cùng các mẫu Material Design và Tailwind, rồi xuất ra CSS chính xác.
Về công cụ này
Công cụ tạo box shadow này tạo CSS box-shadow bằng thanh trượt cho offset X và Y, blur, spread, màu, độ mờ và inset, cùng các mẫu Material Design và Tailwind, rồi xuất ra CSS chính xác.
Cách sử dụng
- Bắt đầu từ một mẫu có sẵn hoặc giữ Custom.
- Điều chỉnh offset X/Y, blur, spread và độ mờ.
- Chọn màu bóng và đánh dấu Inset để tạo bóng bên trong.
- Nhấn Copy CSS để dán quy tắc box-shadow.
Điều nên biết
- Cú pháp box-shadow là: [inset] offset-x offset-y blur-radius spread-radius color.
- Blur radius càng lớn thì cạnh bóng càng mềm; spread làm bóng to ra hoặc thu nhỏ lại trước khi làm mờ.
- Bóng tối có độ mờ thấp (khoảng 10–25%) trông tự nhiên hơn màu đen đặc.
- Có thể xếp chồng nhiều lớp bóng bằng cách ngăn cách chúng bằng dấu phẩy.
- Từ khóa inset vẽ bóng ở bên trong viền của phần tử.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Làm sao thêm bóng cho div trong CSS?
Dùng thuộc tính box-shadow, ví dụ box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); công cụ này viết sẵn giá trị cho bạn.
Blur và spread khác nhau thế nào?
Blur quyết định độ mềm của cạnh bóng. Spread mở rộng hoặc thu nhỏ kích thước bóng trước khi áp dụng blur.
Làm sao tạo bóng bên trong?
Thêm từ khóa inset vào đầu giá trị, hoặc đánh dấu Inset trong công cụ.
Có thể dùng nhiều box shadow cùng lúc không?
Có. Ngăn cách các bóng bằng dấu phẩy; bóng nhiều lớp, như các mẫu Material và Tailwind, trông chân thực hơn.