Công cụ tạo CSS box-shadow trực tuyến miễn phí. Điều chỉnh offset, blur, spread và màu với xem trước trực tiếp. Sao chép mã. Trình duyệt.
Nhấn Ctrl+D để đánh dấu trang này
Trình tạo bóng CSS là công cụ trực tuyến miễn phí chỉnh sửa trực quan thuộc tính box-shadow.
Có, bạn có thể thêm nhiều bóng để tạo chiều sâu và hiệu ứng phức tạp. Mỗi bóng có thể điều chỉnh riêng.
Bóng inset xuất hiện bên trong phần tử thay vì bên ngoài. Box-shadow thường hiển thị bên ngoài, thêm inset tạo hiệu ứng lõm vào.
Bóng đổ thật không phải màu đen, nó gần với màu nền được làm tối đi và càng ra mép càng mềm. Thay vì một lớp bóng đen 30% thật đậm, hãy chồng hai ba lớp thật nhạt với bán kính làm mờ khác nhau — chẳng hạn lớp 1 px sát mép, lớp 8 px phía sau và một lớp 24 px rất nhạt ở ngoài cùng. Hãy giả định nguồn sáng ở phía trên: chỉ cho bóng dịch theo chiều dọc và để độ dịch ngang bằng không.
Ở trạng thái tĩnh thì chi phí gần như không đáng kể, nhưng mọi thứ khác đi ngay khi bạn tạo hoạt cảnh. Chuyển động giá trị box-shadow khi rê chuột buộc trình duyệt tính lại độ mờ ở từng khung hình, khiến máy yếu giật thấy rõ. Nếu cần bóng lớn dần khi tương tác, hãy chuyển động opacity hoặc transform của một lớp bóng đã vẽ sẵn — kết quả mượt hơn nhiều.