Xem trước
Preview
Box Shadow Generator giúp bạn tạo và tùy chỉnh CSS box-shadow trực quan với nhiều layers. Điều chỉnh offset, blur, spread, màu sắc và opacity, hỗ trợ inset shadow, rồi copy ngay CSS.
Preview trực tiếp
Thấy ngay kết quả shadow khi điều chỉnh các thông số.
Nhiều layer shadow
Kết hợp nhiều shadow layers để tạo hiệu ứng depth phức tạp.
Copy CSS ngay
Lấy CSS chuẩn để paste vào dự án mà không cần viết tay.
Inner shadow
Hỗ trợ cả outer và inner (inset) shadow.
01
Chỉnh offset X/Y
Kéo slider để điều chỉnh vị trí bóng đổ theo chiều ngang và dọc.
02
Chỉnh blur/spread
Tăng blur để bóng mềm hơn, tăng spread để bóng rộng hơn.
03
Chọn màu & opacity
Chọn màu bóng và điều chỉnh độ mờ.
04
Export CSS
Copy CSS box-shadow để dùng trong stylesheet.
Offset X / Y
Vị trí bóng theo chiều ngang (X) và dọc (Y). Giá trị dương: phải/xuống, âm: trái/lên.
Blur Radius
Độ mờ của bóng. Giá trị càng cao bóng càng mềm và lan rộng.
Spread Radius
Kích thước bóng. Dương: to hơn element, âm: nhỏ hơn.
Inset
Shadow bên trong element. Tạo hiệu ứng neumorphism hoặc pressed state.
UI Designer
Tạo elevation system cho design system, từ shadow nhẹ đến đổ bóng nặng.
Developer
Copy CSS chính xác mà không cần nhớ syntax hay tính toán giá trị.
Neumorphism
Tạo hiệu ứng neumorphism với inset shadow dễ dàng hơn bao giờ hết.