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!

Làm thế nào để chuyển bóng này sang Tailwind hoặc React?

Dùng bộ chọn định dạng phía trên ô code để chuyển giữa CSS, Tailwind và React. Nút Sao chép sẽ sao chép đúng định dạng đang chọn.

Tailwind (giá trị tùy ý):
Tailwind không cho phép khoảng trắng bên trong giá trị tùy ý, nên khoảng trắng trong một lớp được đổi thành dấu gạch dưới, còn dấu phẩy giữ các lớp lại với nhau:
shadow-[0_10px_30px_rgba(0,0,0,0.2)]
Công cụ cũng xuất các class bg-[...] và rounded-[...] tương ứng.

React / JSX (đối tượng style nội tuyến):
JSX cần khóa dạng camelCase và giá trị là chuỗi trong dấu nháy:
style={{ boxShadow: '0 10px 30px rgba(0,0,0,0.2)', backgroundColor: '#ffffff', borderRadius: 8 }}

Bóng nhiều lớp và inset được tuần tự hóa chính xác trong cả ba định dạng.

Tại sao bóng của tôi trông khác nhau trên các trình duyệt hoặc màn hình retina?

Khác biệt nhỏ khi render là bình thường:

- Làm tròn sub-pixel: blur và spread được rasterize khác nhau ở mỗi engine. Trên màn hình retina (2x/3x) một bóng 1px có thể trông mềm hơn; chỉnh blur hoặc dùng offset số nguyên pixel để giữ sắc nét.
- Không gian màu: rgba() được hiểu theo sRGB ở mọi nơi, nên ưu tiên rgba/hex thay vì tên màu.
- box-shadow so với filter: drop-shadow(): box-shadow bám theo border-box hình chữ nhật của phần tử. Với hình không phải chữ nhật (PNG trong suốt, clip-path, icon SVG) hãy dùng filter: drop-shadow() vì nó vẽ theo viền alpha thật.

Khả năng truy cập: bóng chỉ mang tính trang trí. Đừng chỉ dựa vào bóng để thể hiện trạng thái (focus, lỗi); hãy kết hợp với viền hoặc thay đổi màu rõ ràng và giữ đủ độ tương phản.

Hiệu năng: bán kính blur rất lớn tốn kém khi repaint, nhất là khi animation. Tránh animation trực tiếp box-shadow trên phần tử lớn; thay vào đó animation opacity của pseudo-element, hoặc dùng will-change: transform chỉ trên vài phần tử thật sự cần.

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