🌫️

tạo box shadow CSS

Tạo giá trị CSS box-shadow trực quan. Điều chỉnh offset, blur, spread, màu và độ mờ với xem trước trực tiếp. Xếp chồng nhiều lớp và sao chép CSS cuối cùng.

Công cụ tạo Chạy cục bộ Không gửi dữ liệu
cssbox-shadowtrình tạothiết kế
Lớp
Độ lệch X4px
Độ lệch Y4px
Độ nhòe8px
Độ lan0px
%
Inset

Tạo box shadow CSS là gì?

Tạo box shadow CSS cho phép bạn trực quan xây dựng các giá trị box-shadow và sao chép CSS ngay lập tức. Điều chỉnh độ lệch, độ nhòe, độ lan, màu và độ mờ với bản xem trước trực tiếp.

Cách sử dụng công cụ tạo box shadow

  1. Điều chỉnh thanh trượt Độ lệch X/Y, Độ nhòe và Độ lan.
  2. Chọn màu bóng và đặt độ mờ.
  3. Bật Inset để có hiệu ứng bóng bên trong.
  4. Thêm nhiều lớp hơn cho bóng phức tạp.
  5. Sao chép CSS và dán vào dự án của bạn.
Tìm hiểu thêm▾
Tham số Box Shadow
  • Độ lệch X/Y —dịch chuyển bóng theo chiều ngang và chiều dọc
  • Độ nhòe —độ mềm/mờ của viền bóng
  • Độ lan —mở rộng hoặc thu nhỏ kích thước bóng
  • Inset —hiển thị bóng bên trong phần tử
Câu hỏi thường gặp
Tôi có thể thêm nhiều bóng không?

Có. Nhấp vào 'Add Layer' để xếp chồng nhiều giá trị box-shadow, được kết hợp bằng dấu phẩy trong CSS đầu ra.

Làm cách nào để sử dụng CSS được tạo?

Nhấp vào 'Copy CSS' và dán thuộc tính box-shadow trực tiếp vào tệp CSS hoặc khối style của bạn.