Tạo Bóng Đổ

Tạo CSS Box Shadow - Tạo Hiệu Ứng Bóng Ấn Tượng

Công cụ tạo CSS box-shadow mạnh mẽ tạo hiệu ứng bóng đẹp với xem trước trực tiếp. Có nhiều lớp bóng, tùy chỉnh blur, spread và offset, kiểm soát opacity, và các kiểu bóng có sẵn. Hoàn hảo cho web designers và developers.

CSS box-shadow là gì?

CSS box-shadow là thuộc tính thêm hiệu ứng bóng xung quanh khung của phần tử. Nó tạo chiều sâu và sự thu hút thị giác trong thiết kế web.

Cú pháp:
box-shadow: offset-x offset-y blur spread color;

Các thành phần:
- offset-x: Vị trí bóng ngang
- offset-y: Vị trí bóng dọc
- blur: Bán kính mờ (độ mềm)
- spread: Mở rộng kích thước bóng
- color: Màu bóng (hỗ trợ rgba cho độ mờ)
- inset: Từ khóa tùy chọn cho bóng trong

Ví dụ:
box-shadow: 10px 10px 20px rgba(0,0,0,0.3);

Lợi ích:
- Không cần hình ảnh
- Tăng tốc phần cứng
- Hỗ trợ nhiều bóng
- Có thể animation với CSS transitions

Làm thế nào để tạo nhiều lớp bóng?

Nhiều bóng tạo chiều sâu và chân thực:

Phương pháp:
1. Nhấn nút 'Thêm Bóng'
2. Cấu hình từng lớp riêng biệt
3. Các lớp xếp chồng theo thứ tự

Ví dụ CSS:
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1),
0 16px 32px rgba(0,0,0,0.1);

Mẹo bóng nhiều lớp:
- Sử dụng opacity giảm dần
- Tăng blur theo khoảng cách
- Giữ màu nhất quán
- 2-4 lớp thường là đủ

Kỹ thuật phổ biến:
- Bóng nâng (Material Design)
- Soft UI (Neumorphism)
- Hiệu ứng phát sáng
- Ảo giác chiều sâu 3D

Sự khác nhau giữa blur và spread là gì?

Blur và spread kiểm soát các khía cạnh khác nhau:

Bán kính Blur:
- Kiểm soát độ mềm của bóng
- Giá trị cao = cạnh mềm hơn
- 0 = bóng sắc nét
- Ảnh hưởng gradient của bóng
- Điều chỉnh phổ biến nhất

Bán kính Spread:
- Kiểm soát kích thước bóng
- Dương = bóng lớn hơn
- Âm = bóng nhỏ hơn
- 0 = cùng kích thước với phần tử
- Mở rộng/thu hẹp đều

Ví dụ:
Bóng sắc: blur: 0, spread: 0
Bóng mềm: blur: 20px, spread: 0
Hiệu ứng phát sáng: blur: 20px, spread: 5px
Lơ lửng: blur: 40px, spread: -10px

Sử dụng kết hợp:
- Tinh tế: blur thấp, không spread
- Ấn tượng: blur cao, spread nhẹ
- Lơ lửng: blur cao, spread âm

Khi nào nên sử dụng bóng inset?

Bóng inset xuất hiện bên trong phần tử:

Trường hợp sử dụng:
- Trạng thái nút đã nhấn
- Tạo kiểu input field
- Thiết kế Neumorphism
- Hiệu ứng chiều sâu trong
- Phần tử lõm

Cú pháp:
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);

Mẹo thiết kế:
- Kết hợp với bóng ngoài cho 3D
- Sử dụng cho trạng thái :active của nút
- Tuyệt vời cho form inputs
- Tạo diện mạo 'khắc'

Ví dụ:
Nút đã nhấn:
inset 0 2px 4px rgba(0,0,0,0.3)

Neumorphism:
box-shadow:
inset 5px 5px 10px #d1d1d1,
inset -5px -5px 10px #ffffff;

Lưu ý: Bóng inset không hoạt động với hình ảnh hoặc phần tử thay thế.

Làm thế nào để tạo các hiệu ứng bóng phổ biến?

Các kiểu bóng phổ biến:

Material Design Elevation:
- Bóng 1: 0 1px 3px rgba(0,0,0,0.12)
- Bóng 2: 0 1px 2px rgba(0,0,0,0.24)
Kết hợp cho chiều sâu tinh tế

Thẻ lơ lửng:
0 20px 40px -10px rgba(0,0,0,0.2)
Spread âm tạo hiệu ứng lơ lửng

Phát sáng Neon:
0 0 20px #ff00ff,
0 0 40px #ff00ff
Cùng màu, tăng blur

Bóng mềm:
0 10px 30px rgba(0,0,0,0.1)
Blur lớn, opacity thấp

Bóng cứng:
5px 5px 0 #000
Không blur cho diện mạo retro

Neumorphism:
box-shadow:
10px 10px 20px #d1d1d1,
-10px -10px 20px #ffffff;
Hướng ngược lại, màu sáng/tối

Công cụ này bao gồm các preset này để sử dụng nhanh!

Tính năng chính

• Xem trước trực tiếp với cập nhật tức thì
• Điều chỉnh offset ngang và dọc
• Kiểm soát bán kính blur và spread
• Tùy chỉnh màu bóng và độ mờ
• Chuyển đổi bóng inset/outset
• Thêm nhiều lớp bóng
• 8 kiểu bóng có sẵn
• Tùy chỉnh màu hộp và bo góc
• Sao chép code CSS sẵn sàng sử dụng
• Hỗ trợ màu RGBA cho độ trong suốt
• Preset bóng Material Design
• Hiệu ứng Neumorphism và phát sáng
• Xử lý 100% phía client
• Không giao tiếp server
• Hoạt động offline
• Hỗ trợ chế độ tối
• Giao diện thân thiện với mobile