Trình tạo Box Shadow

Kéo các thanh trượt để tạo hiệu ứng box-shadow, xếp chồng các lớp để tạo chiều sâu và sao chép mã CSS hoàn thiện ngay lập tức.

Các lớp đổ bóng
Lớp 1
CSS
Điều chỉnh các thanh trượt để tạo hình cho bóng của bạn.

Mọi hiệu ứng đổ bóng đều được kết xuất trong trình duyệt của bạn. Không có dữ liệu nào bạn thiết lập được tải lên BroBroGo.

Hỏi đáp

Độ lệch, độ mờ và độ lan rộng thực sự kiểm soát những gì?

Độ lệch (Offset) di chuyển bóng sang trái/phải và lên/xuống, độ mờ (blur) làm mềm các cạnh của bóng, và độ lan rộng (spread) làm tăng hoặc giảm kích thước bóng trước khi làm mờ. Giá trị spread âm sẽ thu nhỏ bóng vào trong, rất hữu ích để tạo bóng ôm sát, tinh tế.

Tùy chọn bóng trong (inset) có tác dụng gì?

Bóng thông thường đổ ra phía ngoài phần tử, giống như ánh sáng phía sau một chiếc thẻ nổi lên. Tùy chọn Inset sẽ đảo ngược bóng vào bên trong, làm cho phần tử trông như bị lõm xuống — rất hữu ích cho các ô nhập liệu chìm hoặc các nút đang được nhấn.

Tại sao nên xếp chồng nhiều lớp đổ bóng?

Một lớp bóng đơn lẻ trông sẽ khá bẹt khi vượt quá một kích thước nhất định. Hiệu ứng đổ bóng chân thực trong thực tế thường kết hợp một lớp bóng hẹp, đậm màu với một lớp bóng mềm, rộng hơn — hãy thêm lớp thứ hai và tinh chỉnh độc lập từng lớp để đạt được hiệu ứng đó.