Box Shadow Generator

Giới thiệu công cụ

Ngang — dương dịch bóng sang phải, âm sang trái. Dọc — dương dịch xuống, âm dịch lên. Mờ — giá trị lớn tạo bóng mềm mại hơn. Lan rộng — dương mở rộng bóng, âm thu nhỏ bóng.

Bật nội bộ để tạo bóng bên trong. Thêm nhiều bóng với "+ Thêm bóng" — chúng được phân cách bằng dấu phẩy trong CSS, xếp lớp từ trước ra sau.

Cách sử dụng

1. Điều chỉnh thanh trượt Ngang và Dọc để đặt độ lệch bóng.
2. Tăng Mờ để có bóng mềm, hoặc đặt 0 để có bóng sắc nét.
3. Dùng Lan rộng để mở rộng hoặc thu nhỏ bóng ra ngoài phần tử.
4. Nhấp "+ Thêm bóng" để xếp chồng nhiều bóng tạo hiệu ứng phong phú hơn.

Trường hợp sử dụng

Nhà thiết kế dùng box-shadow tạo chiều sâu và độ cao cho thẻ UI. Bóng nội bộ tạo hiệu ứng nút bị nhấn. Nhiều bóng chồng lên tạo ánh sáng thực tế với ánh sáng môi trường và ánh sáng chính.

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

• Tùy chọn inset là gì? — Bóng inset xuất hiện bên trong viền phần tử thay vì bên ngoài. Hữu ích để tạo hiệu ứng nhấn cho ô nhập và nút.
• Có thể thêm nhiều bóng không? — Có. Nhấp "+ Thêm bóng" để thêm lớp bóng. Tất cả bóng kết hợp thành một khai báo box-shadow phân cách bằng dấu phẩy.
• Giá trị lan rộng âm làm gì? — Lan rộng âm thu nhỏ bóng hơn phần tử. Kết hợp với độ lệch và mờ, tạo bóng tinh tế chỉ hiện ra ở một phía.