Tạo box shadow CSS
Nắn đổ bóng bằng thanh trượt và sao chép CSS.
Hộp và nền
Chạy ngay trên trình duyệt. Không có gì bạn nhập vào bị gửi đi đâu cả.
- Xếp chồng tới 8 lớp
- Shadow inset
- 6 mẫu có sẵn
Cách tạo box shadow CSS
- Bắt đầu từ một mẫu có sẵn, hoặc kéo thanh trượt độ lệch, độ nhòe và độ lan.
- Thêm lớp để có bóng đổ mềm mại và tự nhiên hơn.
- Sao chép dòng box-shadow vào CSS của bạn.
Từng giá trị box-shadow làm gì
| Giá trị | Ý nghĩa | Khoảng thường dùng |
|---|---|---|
| Offset X | Di chuyển bóng sang phải, hoặc sang trái nếu âm | -100 đến 100px |
| Offset Y | Di chuyển bóng xuống dưới, hoặc lên trên nếu âm | -100 đến 100px |
| Độ nhòe | Làm mềm cạnh; 0 cho bóng cạnh sắc | 0 đến 200px |
| Độ lan | Làm bóng phình to hoặc thu nhỏ trước khi bị làm nhòe | -100 đến 100px |
| Độ mờ | Bóng trông đặc đến mức nào | 10 đến 30% để trông tự nhiên |
Giá trị khởi điểm cho các kiểu thường gặp
| Mẫu | Offset Y | Độ nhòe | Độ lan | Độ mờ |
|---|---|---|---|---|
| Mềm | 10px | 30px | -5px | 20% |
| Sắc nét | 6px (cả X) | 0px | 0px | 100% |
| Phát sáng | 0px | 24px | 4px | 55% |
| Chìm | 2px | 6px | 0px | 25% |
Nhiều lớp và Bồng bềnh được dựng dựa trên những giá trị này bằng cách xếp chồng hai hoặc ba bóng cùng lúc, điều mà một lớp đơn không thể tái hiện được.
Mẹo để bóng đổ trông tự nhiên
- Ánh sáng thật hiếm khi tạo ra bóng đen tuyền. Hãy dùng độ mờ 10 đến 30%, và ngả màu bóng theo tông nền để có kết quả mềm mại hơn.
- Xếp chồng 2 hoặc 3 bóng: một bóng nhỏ, sát ngay cạnh hộp, và một bóng lớn hơn, nhòe hơn ở xa hơn, đúng như cách các mẫu Nhiều lớp và Bồng bềnh được dựng.
- Độ lan âm kết hợp độ lệch dọc lớn tạo hiệu ứng thẻ bồng bềnh thường thấy trong giao diện hiện đại.
- Một phần tử cha có overflow: hidden cắt bóng đổ hệt như cắt nội dung, nên hãy thêm padding cho phần tử cha thay vì bỏ overflow ở khắp nơi.
Câu hỏi thường gặp về Tạo box shadow
Các giá trị của box-shadow nghĩa là gì?
Theo thứ tự: độ lệch ngang, độ lệch dọc, bán kính độ nhòe, bán kính độ lan và màu. Độ lệch dương di chuyển bóng sang phải và xuống dưới, còn từ khóa inset vẽ bóng vào bên trong hộp.
Làm sao để bóng đổ trông tự nhiên?
Xếp chồng hai hoặc ba bóng mềm với độ mờ thấp: một bóng nhỏ, sát ngay cạnh hộp, và một bóng lớn hơn, nhòe hơn ở xa hơn. Bóng thật hiếm khi đen tuyền ở cường độ tối đa.
Độ lan dùng để làm gì?
Độ lan làm bóng phình to hoặc thu nhỏ trước khi bị làm nhòe. Độ lan âm kết hợp độ lệch dọc lớn tạo hiệu ứng thẻ bồng bềnh.
Vì sao bóng của tôi bị cắt mất?
Một phần tử cha có overflow: hidden sẽ cắt bất cứ thứ gì vẽ ra ngoài hộp của nó, kể cả bóng đổ. Hãy thêm padding cho phần tử cha hoặc bỏ thiết lập overflow đó.
Tôi có thể xếp chồng bao nhiêu lớp bóng?
Tối đa 8 lớp trên trang này. Bản thân CSS không giới hạn số lớp box-shadow, nhưng quá 3 hoặc 4 lớp hiếm khi tạo khác biệt rõ rệt mà lại tốn công vẽ hơn.
Box shadow có làm thay đổi kích thước hay khoảng cách của phần tử không?
Không. Box-shadow thuần túy chỉ mang tính thị giác và không bao giờ ảnh hưởng đến layout, khác với border hay outline, nên các phần tử xung quanh không bao giờ bị xô lệch khi bạn thêm hoặc đổi kích thước bóng.