CSS Box Shadow Generator (Multi-layer)

Box Shadow là gì?

CSS box-shadow tạo bóng đổ cho element — giúp UI có chiều sâu, phân tầng. Cú pháp:

box-shadow: <offset-x> <offset-y> <blur> <spread> <color>;

• offset-x / offset-y: dịch chuyển bóng theo trục X/Y. Số dương = phải/xuống.
• blur: độ mờ. 0 = sắc nét, càng lớn càng mờ.
• spread: kích thước bóng. Số âm = thu nhỏ.
• color: thường dùng rgba(0,0,0,0.1) để giữ độ trong suốt.
• inset: thêm inset ở đầu để bóng đổ vào trong.

Multi-layer shadow

Cách tạo shadow đẹp như Material Design hay Neumorphic là stack nhiều lớp. Cách nhau bằng dấu phẩy:

box-shadow:
  0 1px 3px rgba(0,0,0,0.12),
  0 1px 2px rgba(0,0,0,0.24);

Lớp gần (blur nhỏ, dark) tạo cạnh sắc. Lớp xa (blur lớn, mờ) tạo độ sâu. Tool này có 8 preset sẵn — chọn rồi tinh chỉnh.

Khi nào dùng style nào?

• Material Design: 2 lớp shadow nhỏ — phù hợp Android, web app modern.
• Neumorphic: 1 shadow tối + 1 shadow sáng đối lập — UI mềm mại, "nhô lên".
• Inset: input field, button pressed state — cảm giác lõm vào.
• Glow: notification, focus ring — màu đậm, blur lớn.
• XL shadow: modal, dropdown — tách rõ khỏi background.

Performance tip

Box shadow với blur lớn tốn GPU khi animate. Nếu cần animate hover, dùng transform thay vì đổi shadow. Hoặc dùng will-change: box-shadow để browser pre-render.