Tạo box shadow CSS
Xếp chồng vài lớp bóng nhẹ để có hiệu ứng đổ bóng tự nhiên, rồi sao chép CSS.
Đã niêm phong trên thiết bị này
Chạy ngay trong trình duyệt. Không có gì được tải lên.
Đã niêm phong
Xem trước
Các lớp bóng
Chưa có bóng nào. Thêm một lớp để bắt đầu.
Mã CSS
Cách hoạt động
-
Bắt đầu từ một mẫu
Chọn bóng mềm, nhiều lớp, nổi, sắc nét hoặc bên trong làm điểm khởi đầu.
-
Điều chỉnh các lớp
Chỉnh độ lệch, độ mờ, độ lan, màu và độ đậm của từng lớp, thêm hoặc bỏ lớp. Bản xem trước cập nhật ngay khi bạn chỉnh.
-
Sao chép CSS
Sao chép khai báo box-shadow và dán vào tệp CSS của bạn.
Câu hỏi thường gặp
Độ mờ và độ lan có tác dụng gì?
Độ mờ làm mềm viền của bóng: giá trị càng cao, bóng càng tỏa rộng. Độ lan phóng to hoặc thu nhỏ bóng trước khi áp dụng độ mờ. Độ lan âm kết hợp độ mờ lớn tạo ra vẻ mềm mại, nổi nhẹ thường thấy trong giao diện hiện đại.
Tại sao nên dùng nhiều lớp bóng?
Bóng thật có phần lõi tối, gọn sát vật thể và một quầng mềm, rộng ở xa hơn. Xếp một lớp nhỏ sắc nét với một hoặc hai lớp lớn hơn, nhạt hơn sẽ tái hiện điều đó và trông tự nhiên hơn hẳn một lớp bóng duy nhất.
Bóng inset là gì?
Bóng inset được vẽ bên trong phần tử thay vì bên ngoài. Nó khiến bề mặt trông như bị lõm xuống, rất hợp với ô nhập liệu hoặc nút đang được nhấn.
Bóng đổ có hoạt động trên mọi trình duyệt không?
Có. box-shadow, nhiều lớp bóng và cú pháp màu rgb() dùng trong mã đều được mọi trình duyệt hiện nay hỗ trợ.
Box shadow có làm trang của tôi chậm đi không?
Bóng tĩnh rất nhẹ khi vẽ. Độ mờ rất lớn trên nhiều phần tử, hoặc tạo hiệu ứng chuyển động cho chính bóng đổ, có thể tốn tài nguyên hơn. Để bóng chuyển động mượt, hãy thay đổi độ đậm của một pseudo-element mang bóng đổ.