Trình tạo CSS Box Shadow & Border Radius

Trình tạo CSS Box Shadow & Border Radius

🎨 Trình tạo box-shadow và border-radius CSS miễn phí với xem trước trực tiếp. Tạo bóng đổ đẹp, bo góc và hiệu ứng UI hiện đại. Mã sẵn sàng sao chép cho thiết kế web.

Thuộc tính Box Shadow

Thuộc tính CSS box-shadow thêm hiệu ứng bóng đổ xung quanh khung của một phần tử. Bạn có thể đặt nhiều hiệu ứng bằng cách phân tách bằng dấu phẩy. Một box-shadow được mô tả bởi độ lệch X và Y so với phần tử, bán kính blur và spread, cùng màu sắc.

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

Thông số bóng đổ

• Độ lệch X (ngang): Giá trị dương dịch bóng sang phải, âm sang trái
• Độ lệch Y (dọc): Giá trị dương dịch bóng xuống, âm dịch lên
• Bán kính Blur: Giá trị lớn tạo mờ nhiều hơn. 0 nghĩa là bóng sắc nét
• Bán kính Spread: Giá trị dương làm bóng nở ra, âm làm bóng co lại
• Màu: Bất kỳ giá trị màu CSS nào (hex, rgb, rgba, hsl)
• Inset: Chuyển bóng thành bóng trong thay vì bóng ngoài

Thuộc tính Border Radius

Thuộc tính border-radius bo tròn các góc của cạnh viền ngoài phần tử. Bạn có thể đặt một bán kính để tạo góc tròn, hoặc hai bán kính để tạo góc elip.

Cú pháp: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

Trường hợp sử dụng phổ biến

• Card: Bóng nhẹ (0 4px 6px rgba(0,0,0,0.1)) với bo vừa (8px)
• Nút: Bóng màu trùng với nút để tạo chiều sâu
• Modal: Bóng lớn (0 20px 25px rgba(0,0,0,0.15)) để trông như nổi
• Ảnh: Avatar tròn (border-radius: 50%) hoặc thumbnail bo góc (8–16px)
• Ô nhập: Bóng inset cho trạng thái nhấn/đang focus
• Neumorphic: Nhiều bóng (sáng và tối) cùng màu nền

Mẹo hay khi dùng bóng đổ

• Dùng bóng nhẹ: Độ trong suốt 10–20% thường đủ để tạo chiều sâu
• Y-offset > X-offset: Mô phỏng ánh sáng tự nhiên từ phía trên
• Blur lớn cho cảm giác nổi: Blur nhiều = trông “cao” hơn khỏi bề mặt
• Khớp màu bóng: Dùng màu phần tử với opacity thấp để hài hòa
• Hiệu năng: Tránh animate box-shadow; dùng opacity/transform thay thế

Kiểu bóng đổ phổ biến

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

Mẫu bo góc

• Không (0px): Góc vuông, phong cách tối giản hiện đại
• Nhỏ (4px): Bo nhẹ cho input, button
• Vừa (8px): Tiêu chuẩn cho card, container
• Lớn (16px+): Thân thiện, mềm mại
• Viên thuốc (999px hoặc 50%): Bo tròn hai đầu cho tag, badge
• Hình tròn (50%): Avatar, nút icon (cần phần tử vuông)

Kỹ thuật nâng cao

• Nhiều lớp bóng: Kết hợp bóng để tạo hiệu ứng nhiều tầng
• Hiệu ứng phát sáng: 0 0 20px [màu] không cần offset
• Neumorphism: Bóng sáng trên-trái, bóng tối dưới-phải
• Vòng focus: Bóng màu cho accessibility (0 0 0 3px rgba(màu,0.5))
• Hiệu ứng 3D: Nhiều bóng với offset và blur tăng dần

Hỗ trợ trình duyệt

Box-shadow và border-radius được hỗ trợ trên tất cả trình duyệt hiện đại. Với IE8 trở xuống, có thể dùng tiền tố (-webkit-box-shadow, -moz-box-shadow) nhưng hiện nay hầu như không cần.

💡 Mẹo Pro: Khi làm hiệu ứng hover, đừng animate box-shadow trực tiếp vì khá tốn tài nguyên. Thay vào đó, tạo bóng trên pseudo-element (::before hoặc ::after) và animate opacity. Hiệu ứng tương tự nhưng hiệu năng tốt hơn nhiều, đặc biệt trên thiết bị di động!