🌑 CSS Box Shadow Generator

Kéo slider để tạo bóng để CSS dẹp mặt. Preview thẻi gian thẻc, copy CSS 1 click.

? Preset nhanh

Offset X 0px

Offset Y 5px

Blur 15px

Spread 0px

Opacity 30%

Màu bóng

Màu hợp

Inset (bóng trong) Nền tải

box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.30);

? Câu Hỏi Thường Gặp

Các tham số box-shadow có ư nghia ǵ?

Offset X, Y: về trí lịch của bóng. Blur: để mã, càng cao bóng càng nḥe. Spread: kích thuộc bóng (duong = to ra, âm = thu nhỏ). Inset: bóng ? trong phần từ thay v́ bên ngoài.

Có thể có nhiều layer box-shadow khôngũ

Có, CSS cho phép stacking nhiều shadow ngan cách bạng đầu phẩy: box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 4px 6px rgba(0,0,0,.08). Kỹ thuật này dùng để tạo shadow từ nhiên hon.

Box-shadow có ảnh hướng dẫn layout khôngũ

Không. Khác với outline, box-shadow không chiếm không gian layout và không ảnh hướng dẫn về trí các phần từ xung quanh. Đây là lư do box-shadow được ua dùng hon border khi cần hiểu ứng thẻ giác mà không muốn ảnh hướng layout.