Trình tạo CSS Box Shadow
Tạo các bóng đẹp một cách trực quan và sao chép CSS.
Cài đặt sẵn
box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.25);
Cách sử dụng
- Kéo các thanh trượt để điều chỉnh offset ngang và dọc, độ mờ, lan tỏa và độ trong suốt.
- Chọn màu bóng và bật «inset» nếu cần.
- Nhấp «Thêm lớp bóng» để xếp chồng nhiều bóng.
- Sử dụng cài đặt sẵn làm điểm khởi đầu nhanh.
- Nhấp «Sao chép CSS» để dán kết quả vào stylesheet của bạn.
Câu hỏi thường gặp
box-shadow trong CSS là gì?
Thuộc tính CSS box-shadow thêm các hiệu ứng bóng xung quanh một phần tử. Nó có các giá trị cho offset ngang, offset dọc, bán kính làm mờ, bán kính lan tỏa và màu sắc.
Tôi có thể thêm nhiều bóng không?
Có. Nhấp «Thêm lớp bóng» để thêm một bóng khác. Nhiều bóng được phân tách bằng dấu phẩy trong đầu ra CSS. Điều này cho phép tạo các hiệu ứng xếp chồng phức tạp.
Từ khóa inset dùng để làm gì?
Thêm «inset» khiến bóng xuất hiện bên trong phần tử thay vì bên ngoài, tạo ra bóng bên trong hoặc hiệu ứng «lõm vào».
Năm tham số của box-shadow
CSS box-shadow gắn một hoặc nhiều hiệu ứng đổ bóng vào border box của phần tử. Cú pháp là box-shadow: <color>? <offset-x> <offset-y> <blur-radius>? <spread-radius>? inset?, với nhiều bóng đổ được phân cách bởi dấu phẩy. Mỗi tham số thực hiện một việc cụ thể:
- offset-x: khoảng cách bóng đổ dịch chuyển theo chiều ngang. Dương dịch sang phải; âm dịch sang trái.
0canh giữa theo chiều ngang. - offset-y: dịch chuyển theo chiều dọc. Dương dịch xuống (mô phỏng ánh sáng từ trên cao, quy ước UI phổ biến nhất). Âm dịch lên.
- blur-radius: khoảng cách mà cạnh bóng đổ mờ dần đến trong suốt. Được triển khai dưới dạng tích chập Gaussian; giá trị lớn hơn tạo ra bóng mềm hơn, lớn hơn, khuếch tán hơn. Giá trị âm không hợp lệ;
0tạo ra cạnh sắc nét. - spread-radius: mở rộng (dương) hoặc thu hẹp (âm) hình dạng bóng đổ trước khi áp dụng blur. Spread dương mở rộng bóng theo mọi hướng; âm thu hẹp, cho phép giới hạn bóng về một phía của box.
- color: mặc định là
currentcolor(giá trịcolorcủa chính phần tử, đôi khi gây ngạc nhiên). Bóng đổ UI hầu như luôn dùng màu đen hoặc gần đen với alpha thấp,rgba(0,0,0,0.05)đếnrgba(0,0,0,0.25): vì bóng đen đặc trông nặng nề và không tự nhiên. - Từ khóa inset, vẽ bóng đổ bên trong box thay vì bên ngoài. Dùng cho trạng thái nút được nhấn, ô nhập «lõm» lõm vào, và phát sáng bên trong.
Trình duyệt ghép danh sách bóng đổ từ trước ra sau: bóng đổ được liệt kê đầu tiên gần người xem nhất, cái cuối cùng ở xa nhất. Đây là thứ tự giống như text-shadow và background, nhưng ngược với cách hầu hết các quy tắc CSS cascade, điều thường gây ngạc nhiên cho tác giả mới.
Hệ thống elevation hai bóng của Material Design
Material Design của Google (ra mắt tháng 5 năm 2014; Material Design 3 vào năm 2021) định nghĩa hệ thống elevation được lượng hóa trong đó các bề mặt UI nằm ở một trong nhiều cấp độ pixel độc lập mật độ. Công thức bóng đổ ở mỗi cấp độ dùng hai bóng đổ chồng lên nhau:
- Umbra (bóng chính), nhỏ hơn, tối hơn, biểu thị ánh sáng bị chặn trực tiếp bên dưới bề mặt. Offset và blur ngắn.
- Penumbra (bóng môi trường), lớn hơn và khuếch tán hơn, biểu thị ánh sáng tán xạ phản chiếu trong phòng. Offset lớn hơn, blur lớn hơn, alpha nhạt hơn.
Trong Material Design 2, giá trị elevation chạy từ 0dp (không có bóng) đến 24dp; card thường dùng 1-2dp khi nghỉ và animate đến 8dp khi hover, trong khi hộp thoại modal dùng 24dp. Material Design 3 thu gọn thang đo xuống còn năm Level có tên (1 đến 5) và thêm overlay có màu ngoài bóng đổ trên theme tối. Cấu trúc umbra-cộng-penumbra vẫn là mô hình thị giác, và đó là lý do shadow-md của Tailwind đi kèm hai bóng đổ chồng lên nhau: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06).
Neumorphism: xu hướng cần hai bóng đổ đối lập
Neumorphism (từ ghép của «mới» và «skeuomorphism») trở nên phổ biến viral vào cuối năm 2019 / đầu năm 2020 sau khi bài đăng Dribbble tháng 12 năm 2019 của nhà thiết kế Ukraine Alexander Plyuto với tên «Skeuomorph Mobile Banking» nhận được hàng chục nghìn lượt thích trong vài tuần. Công thức đặc trưng là hai box-shadow trên phần tử có cùng màu nền với phần tử cha: bóng tối hơn ở góc dưới bên phải và bóng sáng hơn ở góc trên bên trái. Phía tối mô phỏng bề mặt đang lùi xa khỏi nguồn sáng; phía sáng mô phỏng nó nhô lên tạo điểm sáng ở phía đối diện ánh sáng. Đảo ngược các offset (hoặc thêm inset vào cả hai) tạo ra hình thức lõm/nhấn.
Cảnh báo khả năng tiếp cận thành thật: neumorphism bị chỉ trích rộng rãi vì độ tương phản thị giác giữa phần tử và nền tất yếu rất thấp, chúng chia sẻ màu. Nút và ô nhập có thể không đạt WCAG 1.4.11 (Non-text Contrast, AA, tỷ lệ 3:1 của thành phần UI so với màu liền kề). Trạng thái nhấn và chưa nhấn thường chỉ phân biệt được qua hướng bóng đổ tinh tế, màn hình đọc không thể truyền tải và vô hình với người có thị lực thấp, mù màu, hoặc ánh sáng chói trên màn hình. Hãy dùng phong cách này tiết kiệm trên bề mặt trang trí, không phải điều khiển chính.
box-shadow so với filter: drop-shadow()
CSS Filter Effects định nghĩa một thay thế, filter: drop-shadow(<x> <y> <blur> <color>): trông tương tự về thị giác nhưng có sự khác biệt quan trọng. box-shadow đổ bóng của hình chữ nhật border box (được làm tròn bởi border-radius nếu có). drop-shadow đổ bóng của kênh alpha của phần tử được render, bao gồm phần tử con, PNG trong suốt, hình SVG có khoét rỗng, nội dung bị mask. Lý do phổ biến nhất để chọn drop-shadow là phần tử bạn muốn đổ bóng không phải hình chữ nhật: biểu tượng PNG trong suốt, logo SVG, tam giác hộp thoại.
box-shadow | drop-shadow() | |
|---|---|---|
| Tham số spread | Có | Không |
| Biến thể inset | Có | Không |
| Nhiều bóng đổ | Có (danh sách phẩy) | Có (chuỗi filter) |
| Ảnh hưởng đến phần tử con | Không | Có (toàn bộ subtree) |
| Cắt xén | Có thể mở rộng ra ngoài overflow:hidden | Bị giới hạn trong phạm vi filter |
| Hiệu suất | Thân thiện với compositor | Kích hoạt một lần xử lý filter |
Ghi chú về hiệu suất
Box-shadow là một trong những thuộc tính CSS tốn kém hơn để render trong thời gian thực. Chi phí có ba yếu tố: kích thước kernel blur (tích chập Gaussian là tích chập hai lần tách biệt; tăng gấp đôi blur tăng gấp bốn lần công việc mỗi pixel, vì vậy blur 100 pixel trên một card lớn có thể làm giảm đáng kể tốc độ khung hình khi cuộn), diện tích bề mặt bóng đổ (hình chữ nhật được mở rộng bởi spread và phát triển thêm bởi blur là thứ GPU phải rasterise, bóng đổ modal-overlay lớn là loại tốn kém nhất), và repaint (animate box-shadow kích hoạt repaint vùng bóng đổ mỗi khung hình).
Khuyến nghị thực tế:
- Đối với animation nâng khi hover, ưu tiên animate
transform: translateY()vàopacitythay vìbox-shadow. Chúng được GPU tăng tốc và không kích hoạt paint. - Để đổi bóng khi hover, khai báo cả hai bóng trên pseudo-element với cái lớn hơn ở
opacity: 0, rồi animate opacity của pseudo-element. Điều này đổi bóng mà không cần animate kernel blur, «Shadow Tricks» (2017) của Tobias Ahlin là bài viết chuẩn. will-change: transformcó thể gợi ý trình duyệt nâng phần tử lên layer compositor riêng. Hãy dùng tiết kiệm, nâng nhiều phần tử sẽ lãng phí bộ nhớ GPU.- Tránh box-shadow trên các phần tử chứa nhiều nội dung cuộn. Mỗi khung cuộn phải repaint bóng đổ.
Khả năng tiếp cận
Bóng đổ mang tính trang trí đối với cây khả năng tiếp cận (màn hình đọc bỏ qua chúng) nhưng chúng có các hàm ý:
- WCAG 1.4.11 Non-text Contrast (AA, 3:1). Nếu card hoặc nút chỉ được phân biệt với nền bởi bóng đổ, bóng đó thực tế xác định cạnh thị giác, và bóng
rgba(0,0,0,0.05)mờ trên nền gần trắng có thể không đạt ngưỡng 3:1. Nhiều design system kết hợp cả bóng đổ lẫn viền 1px solid để đảm bảo độ tương phản. - Chỉ báo focus.
box-shadow: 0 0 0 3px <color>là thay thế hiện đại chooutlinemặc định của trình duyệt vì nó đi theoborder-radius. Vòng phải đạt WCAG 2.4.7 Focus Visible, tối thiểu 2 CSS pixel dày, với độ tương phản 3:1 so với trạng thái chưa focus và màu liền kề. - Forced-colors / Windows High Contrast. Ở chế độ
forced-colors: active, trình duyệt bỏ qua hầu hết màu CSS và tô lại nội dung bằng bảng màu hệ thống của người dùng. Bóng box bị xóa hoặc giảm; trạng thái UI nên luôn có chỉ báo không phải bóng (thay đổi viền, thay đổi màu, biểu tượng, nhãn văn bản) cho những người dùng này. - Chuyển động giảm. Người dùng với
prefers-reduced-motion: reducekhông nên thấy animation bóng lớn khi hover hoặc cuộn. Bao bọc các transition animate trong media query và giữ bóng đổ nghỉ cho những người dùng này.
Công thức nhanh
| Hiệu ứng | CSS |
|---|---|
| Nâng card nhẹ nhàng | 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) |
| Card hiện đại mềm mại | 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) |
| Nâng modal nặng | 0 25px 50px -12px rgba(0,0,0,0.25) |
| Viền 1px sắc nét | 0 0 0 1px rgba(0,0,0,0.05) |
| Vòng focus (3px) | 0 0 0 3px rgba(59,130,246,0.5) |
| Ô nhập inset «lõm» | inset 0 2px 4px 0 rgba(0,0,0,0.06) |
| Vầng hào quang phát sáng | 0 0 20px 4px rgba(99,102,241,0.6) |
Thêm câu hỏi
Tại sao bóng đổ của tôi bị cắt?
Hầu như luôn là vì phần tử tổ tiên có overflow: hidden. Bóng đổ mở rộng ra ngoài border box nhưng bị cắt ở cạnh tổ tiên. Hai cách sửa: chuyển bóng lên chính phần tử tổ tiên, hoặc dùng phần tử bao bọc không có overflow clipping. filter: drop-shadow() không gặp vấn đề này nhưng có sự đánh đổi riêng.
Tôi có còn cần dùng vendor prefix như -webkit-box-shadow không?
Không. box-shadow không có prefix đã được hỗ trợ toàn cầu từ khoảng năm 2012. Vendor prefix là nhiễu thuần túy trong code năm 2026 và nên được loại bỏ. Các thư viện CSS reset từ đầu những năm 2010 thường đi kèm chúng như biện pháp phòng thủ; code hiện đại có thể bỏ chúng an toàn.
Làm sao để áp dụng bóng đổ cho văn bản thay vì box?
Hãy dùng text-shadow, có cú pháp offset / blur / màu sắc giống nhau nhưng không có spread hoặc inset. Đối với bóng đổ theo hình chữ trên văn bản trang trí (ví dụ: văn bản gradient background-clip: text), filter: drop-shadow() trên phần tử cha là công cụ đúng, box-shadow sẽ đổ bóng hình chữ nhật sau các chữ cái.
Tại sao bóng đổ 0 0 0 2px của tôi trông không mềm?
Vì giá trị thứ ba (blur radius) là 0. Bóng chỉ spread không có blur tạo ra đường viền sắc nét, đó chính xác là những gì bạn muốn cho vòng focus và thủ thuật «viền giả» nhưng không phải cho elevation mềm. Thêm một chút blur: 0 0 4px 0 rgba(0,0,0,0.2).
Có dữ liệu nào được gửi đến máy chủ không?
Không. Bản xem trước render lại trong trình duyệt của bạn khi bạn kéo thanh trượt; chuỗi CSS được tạo cục bộ; sao chép ghi vào clipboard. Trang hoạt động offline sau khi đã tải.