Tạo CSS Box Shadow
Tạo CSS box-shadow với nhiều layer, preset sẵn (soft, elevated, neumorphism). Xuất CSS, Tailwind và React inline style.
#css#box-shadow#shadow#design#neumorphism#generator
Loading tool...
How to use
- 1Nhập thông số: x=0 y=4 blur=12 spread=0 color=#000000 opacity=0.15
- 2Dùng "---" để phân cách nhiều shadow layer
- 3Nhập "preset=soft" để xem tất cả preset có sẵn
Frequently Asked Questions — Tạo CSS Box Shadow
Inset shadow là gì?+
Inset shadow tạo bóng bên trong phần tử thay vì bên ngoài. Dùng "inset=true" trong thông số. Tốt để tạo hiệu ứng bị nhấn (pressed).
Neumorphism là gì?+
Neumorphism (New Skeuomorphism) là xu hướng thiết kế UI dùng 2 shadow cùng lúc — một sáng một tối — tạo cảm giác phần tử nổi ra từ background.
Spread negative có tác dụng gì?+
Spread âm thu nhỏ shadow lại. Kết hợp với blur lớn tạo soft shadow rất đẹp cho card UI.
Box shadow ảnh hưởng đến performance không?+
Có, box-shadow gây repaint khi animate. Tốt hơn là dùng filter: drop-shadow() hoặc opacity transition thay vì animate box-shadow.