Tạo hiệu ứng nâng "card" cổ điển — shadow nhỏ phía dưới và bên phải. Xếp lớp shadow để có hiệu ứng nâng chân thực (gần và xa) như trong Material Design. Tạo glow xung quanh element bằng cách dùng blur cao, spread thấp và shadow màu. Thiết kế highlight inset và "vết nứt" của neumorphism.

CSS Box Shadow Builder

Soạn box-shadow CSS đơn hoặc xếp lớp một cách trực quan. Điều chỉnh offset, blur, spread, màu và sao chép CSS.

Shadow layers

Preview

Sample

CSS

Tạo bởi JXXR1 · ♥ Tài trợ · ☕ Mời tôi một ly cà phê

Công cụ này để làm gì?

Thuộc tính CSS box-shadow nhận một danh sách các shadow, mỗi shadow có offset, blur, spread, màu và cờ inset tùy chọn. Cú pháp ngắn gọn nhưng cảm giác khó tinh chỉnh số một cách trực quan. Trình xây dựng này cho phép bạn kéo các thanh trượt cho từng tham số, xếp lớp nhiều shadow để có hiệu ứng phức tạp, và sao chép CSS hoàn thành.

Khi nào nên dùng

Tạo hiệu ứng nâng "card" cổ điển — shadow nhỏ phía dưới và bên phải.
Xếp lớp shadow để có hiệu ứng nâng chân thực (gần và xa) như trong Material Design.
Tạo glow xung quanh element bằng cách dùng blur cao, spread thấp và shadow màu.
Thiết kế highlight inset và "vết nứt" của neumorphism.

Lưu ý thường gặp

Spread không phải là blur. Spread mở rộng (hoặc thu nhỏ với giá trị âm) vùng phủ shadow trước khi blur. Hai tham số này thường bị lẫn lộn.
Inset đảo ngược shadow. Inset shadow ở bên trong element thay vì bên ngoài. Hữu ích cho hiệu ứng punched-in, nhưng nó vẽ bên trong phần background, không phải overlay lên nội dung.
Hiệu suất bị ảnh hưởng bởi blur lớn và shadow xếp lớp. Trên các trang dày đặc, shadow lớn có thể ảnh hưởng đến framerate. Hãy giữ chúng vừa phải hoặc dùng filter SVG cho hiệu ứng phức tạp.
Border-radius cắt shadow. Box-shadow theo đường viền của element, bao gồm cả góc bo. Nếu bạn muốn shadow là chữ nhật trong khi element là tròn, cần một wrapper.