Trình Tạo Box Shadow

Điều chỉnh các thanh trượt để tạo bóng đổ hoặc bóng inset trên khung xem trước, sau đó sao chép mã CSS box-shadow được tạo ra. Điều khiển độ lệch ngang và dọc, bán kính làm mờ, bán kính lan tỏa, màu sắc và độ trong suốt — không cần nhớ thứ tự tham số hay tự chuyển màu sang rgba().

Công Cụ Này Là Gì?

box-shadow là thuộc tính CSS vẽ bóng phía sau (hoặc bên trong) một phần tử. Khi viết tay, nó cần tới năm giá trị theo thứ tự — độ lệch ngang, độ lệch dọc, bán kính làm mờ, bán kính lan tỏa, và màu sắc — cộng thêm từ khóa inset tùy chọn, tất cả đều dễ bị nhầm lẫn hoặc trở nên quá nhạt/quá đậm ở lần thử đầu tiên.

Công cụ này biến việc đó thành thao tác trực tiếp: kéo một thanh trượt, xem bóng thay đổi trên khung xem trước trực tiếp, và sao chép mã CSS chính xác khi nó trông vừa mắt. Bộ chọn màu cùng thanh trượt độ trong suốt tự động tạo ra giá trị rgba() phù hợp, vì bóng trong suốt thường trông đẹp hơn bóng hoàn toàn đục.

Tại Sao Nên Dùng?

Xem trước trực tiếp cập nhật ngay khi bạn điều chỉnh bất kỳ tùy chọn nào — thấy chính xác bóng trước khi đưa vào code.
Kiểm soát đầy đủ offset-x, offset-y, blur, spread, màu sắc và độ trong suốt tại một nơi.
Chỉ một cú nhấp để thêm inset cho vẻ ngoài lõm vào/ấn xuống thay vì bóng đổ nổi.
Xuất mã CSS sẵn sàng dán với màu đã được chuyển sang rgba() theo độ trong suốt bạn chọn.
Chạy hoàn toàn trong trình duyệt của bạn — không có gì bạn cấu hình được tải lên bất cứ đâu.
Miễn phí, không cần đăng ký, hoạt động tốt trên điện thoại.

Cách Sử Dụng

Đặt offset-x và offset-y để định vị bóng — giá trị dương đẩy bóng sang phải/xuống dưới, giá trị âm đẩy sang trái/lên trên.
Tăng bán kính làm mờ để làm mềm mép bóng; tăng độ lan để bóng lớn hơn chính phần tử.
Chọn một màu và điều chỉnh độ trong suốt — hầu hết bóng thực tế dùng độ trong suốt 15-40% thay vì màu đen đặc.
Chọn 'inset' nếu bạn muốn bóng xuất hiện bên trong viền của phần tử thay vì phía sau nó.
Sao chép mã CSS được tạo ra và dán vào stylesheet của bạn.

Ví dụ

Đầu vào

Độ lệch: 0px, 10px · Độ mờ: 20px · Độ lan: 0px · Màu: đen với độ trong suốt 35%

Đầu ra

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Một bóng mềm ngay bên dưới phần tử không có độ lệch ngang — một trong những kiểu bóng thẻ/nút phổ biến nhất.

Bóng đơn so với bóng nhiều lớp

Công cụ này tạo một lớp bóng duy nhất, bao phủ phần lớn các trường hợp sử dụng thực tế — nút, thẻ, hộp thoại và menu xổ xuống hầu như luôn dùng một bóng. CSS có hỗ trợ nhiều bóng phân tách bằng dấu phẩy trên cùng một phần tử để tạo hiệu ứng chiều sâu phức tạp hơn (ví dụ một bóng hẹp, đậm nằm dưới một bóng mềm, rộng), nhưng đó là điều bạn có thể tự thêm bằng tay: tạo một bóng ở đây, sau đó nhân đôi dòng đó, chỉnh bộ giá trị thứ hai, rồi nối chúng bằng dấu phẩy.

Các mẫu box-shadow phổ biến

Hiệu ứng nhấc thẻ nhẹ: độ lệch nhỏ (0-4px), độ mờ vừa (8-16px), độ trong suốt đen 10-20%.
Hộp thoại/menu nổi bật: độ lệch lớn hơn (4-10px) và độ mờ (20-30px), độ trong suốt 20-35% cho cảm giác nổi mạnh hơn.
Nút bị ấn/inset: chọn inset, dùng độ lệch mang cảm giác âm nhẹ và độ mờ vừa để bóng đọc như một vết lõm thay vì được nâng lên.
Ánh sáng màu: chọn màu thương hiệu thay vì màu đen, tăng độ trong suốt lên 40-60%, và tăng nhẹ độ lan để tạo hiệu ứng phát sáng mềm quanh nút.
Bóng sắc/cứng: đặt độ mờ về 0 và độ lan về 0 để có một hình bóng đặc, lệch góc thay vì bóng mềm.

Kết hợp với góc bo tròn

Bóng đổ và góc bo tròn thường được dùng cùng nhau — thẻ, nút và hộp thoại hầu như luôn kết hợp cả hai. Dùng Trình Tạo Border Radius để bo góc cho cùng phần tử đó, rồi áp dụng cả hai khai báo CSS được tạo ra cùng nhau.

→ Trình Tạo Border Radius · Bộ Chuyển Đổi Đơn Vị

Câu Hỏi Thường Gặp

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

Bán kính làm mờ (blur) làm mềm mép của bóng — giá trị càng cao thì bóng càng mờ dần từ từ. Bán kính lan tỏa (spread) thay đổi kích thước của bóng trước khi làm mờ — spread dương làm bóng lớn hơn phần tử ở mọi phía, spread âm làm bóng nhỏ lại. Hầu hết bóng thông thường chỉ dùng blur còn spread để ở 0.

Tại sao dùng rgba() thay vì màu hex thông thường cho bóng?

Một bóng hoàn toàn đục trông gắt và không thực tế — bóng thật luôn có phần trong suốt, để những gì phía sau hiện lên nhẹ. rgba() cho phép bạn đặt độ trong suốt đó trực tiếp, đó là lý do công cụ này luôn xuất màu kèm giá trị alpha thay vì hex đặc.

Từ khóa inset có tác dụng gì?

Không có inset, bóng được vẽ bên ngoài viền của phần tử, như thể phần tử đang nổi trên trang. Với inset, bóng được vẽ bên trong viền, khiến phần tử trông như bị ấn vào hoặc lõm xuống — thường dùng cho trạng thái nút đang được nhấn hoặc ô nhập liệu.

Tôi có thể chồng nhiều hơn một bóng trên cùng một phần tử không?

Có — box-shadow trong CSS chấp nhận một danh sách phân tách bằng dấu phẩy, và trình duyệt hiển thị theo thứ tự đã cho (bóng đầu tiên nằm trên cùng). Một kỹ thuật phổ biến là xếp một bóng hẹp, đậm hơn cùng với một bóng rộng, mềm hơn để tạo chiều sâu thực tế hơn so với chỉ dùng một bóng.

box-shadow có ảnh hưởng đến bố cục hay chỉ hình thức bên ngoài?

Chỉ hình thức bên ngoài — box-shadow không bao giờ ảnh hưởng đến kích thước của phần tử hay vị trí của các phần tử xung quanh, kể cả với giá trị blur hoặc spread lớn. Nếu bóng bị cắt hình một cách trực quan, hãy kiểm tra overflow: hidden trên phần tử cha thay vì các giá trị của bóng.