Trình tạo CSS Box Shadow — Công cụ trực tuyến miễn phí

Trình tạo CSS Box Shadow là gì?

Trình tạo CSS Box Shadow trực tuyến miễn phí. Điều chỉnh độ lệch, độ mờ, độ lan và màu sắc bằng điều khiển trực quan, tạo mã CSS ngay lập tức.

Thuộc tính box-shadow của CSS là một trong những công cụ linh hoạt nhất trong bộ công cụ của nhà thiết kế web, có khả năng thêm chiều sâu, hệ thống phân cấp và sức hấp dẫn thị giác cho các phần tử giao diện. Trình Tạo Box-shadow CSS (CSS Box Shadow Generator) cung cấp giao diện trực quan để tạo mã CSS box-shadow, với toàn quyền kiểm soát mọi thông số và bản xem trước tương tác cập nhật theo thời gian thực.

Trình tạo hiển thị năm thông số có thể điều chỉnh qua các thanh trượt. Độ lệch X di chuyển bóng theo chiều ngang (giá trị dương dịch sang phải, giá trị âm dịch sang trái). Độ lệch Y di chuyển bóng theo chiều dọc (giá trị dương dịch xuống dưới, giá trị âm dịch lên trên). Bán kính Mờ kiểm soát độ mềm của các cạnh bóng — bằng không tạo ra bóng đổ sắc nét, trong khi các giá trị cao hơn tạo ra hiệu ứng mềm hơn, khuếch tán hơn. Bán kính Lan tỏa mở rộng hoặc thu hẹp kích thước bóng mà không ảnh hưởng đến độ mờ. Bộ Chọn Màu đặt màu bóng với kiểm soát độ mờ qua kênh alpha.

Một thẻ xem trước trực tiếp hiển thị hiệu ứng của mọi điều chỉnh ngay lập tức. Thẻ xem trước được tạo kiểu với nền trắng và góc bo tròn để mô phỏng một thành phần giao diện thực tế, nên bạn có thể thấy chính xác bóng sẽ trông như thế nào trên các phần tử giao diện thực tế của bạn. Sáu bóng cài sẵn được đưa vào để chọn nhanh: nhẹ, trung bình, nặng, mờ, bên trong và nâng lên.

Mã box-shadow CSS được tạo ra được hiển thị ở định dạng sẵn sàng sao chép. Đầu ra hỗ trợ cú pháp viết tắt đầy đủ bao gồm cả từ khóa inset cho bóng bên trong. Nhiều giá trị box-shadow có thể được kết hợp bằng cách sao chép đầu ra và tự dán nhiều khai báo. Công cụ cũng xác thực rằng cú pháp là chính xác, nên mọi bản sao là một khai báo CSS hợp lệ.

Ví dụ sử dụng thực tế cho Trình tạo CSS Box Shadow

Tạo bóng thẻ tinh tế cho giao diện bảng điều khiển

Bảng điều khiển của bạn có các thẻ hiển thị chỉ số và biểu đồ. Dùng trình tạo để đặt X=0, Y=2, Blur=4, Spread=0 với màu xám nhạt ở độ mờ 10%. Bóng thu được tạo chiều sâu tinh tế trên các thẻ. Sao chép CSS đã tạo và áp dụng nó cho lớp thành phần thẻ của bạn.

Thiết kế hiệu ứng nút nâng lên cho trang đích

Một nút kêu gọi hành động cần vẻ ngoài nâng lên. Đặt X=0, Y=4, Blur=6, Spread=-1 với màu bóng tối hơn. Tắt tùy chọn inset. Kết quả là một nút có vẻ như nổi lên trên bề mặt trang. Bấm cài sẵn "Nâng lên" làm điểm khởi đầu và tinh chỉnh các giá trị.

Tạo bóng bên trong cho trạng thái tập trung của ô nhập tìm kiếm

Một ô nhập tìm kiếm cần phát sáng bên trong khi được tập trung. Bật tùy chọn Inset. Đặt X=0, Y=2, Blur=4, Spread=0 với màu thương hiệu chính ở độ mờ 30%. Bóng bên trong xuất hiện bên trong viền của ô nhập, báo hiệu trạng thái tập trung cho người dùng.

Tại sao nên dùng Trình tạo CSS Box Shadow?

Full control: X/Y offset, blur, spread, color
Inset shadow toggle
preview on a card element trực tiếp
6 preset shadows included

Cách sử dụng Trình tạo CSS Box Shadow — Hướng dẫn từng bước

Điều chỉnh X offset, Y offset, blur, and spread using sliders.

Chọn a shadow color and toggle inset if needed.

Preview the shadow on the card in real-time.

Sao chép generated CSS box-shadow code.

Trình tạo CSS Box Shadow phù hợp với ai?

UI design
card styling
button effects
phát triển web

Mẹo chuyên nghiệp cho Trình tạo CSS Box Shadow

1Thứ tự của các giá trị trong cú pháp viết tắt box-shadow là: X-offset Y-offset blur-radius spread-radius color. Inset phải đứng đầu hoặc cuối. Trình tạo tự động xuất ra cú pháp chính xác.
2Bóng xếp lớp tạo ra chiều sâu thực tế hơn. Dùng hai bóng: một bóng lệch tinh tế cho chiều sâu chính và một bóng lớn hơn, mềm hơn với độ mờ thấp hơn cho ánh sáng xung quanh. Ví dụ: box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.08).
3Tránh dùng box-shadow trên các phần tử rất lớn (vùng chứa toàn trang). Chi phí kết xuất cho bóng lớn có thể ảnh hưởng đến hiệu suất cuộn, đặc biệt trên thiết bị di động.
4Thông số spread với giá trị âm tạo ra bóng nhỏ hơn phần tử. Kết hợp với độ mờ, điều này tạo ra hiệu ứng "vignette" nơi bóng tập trung quanh các cạnh.

Trình tạo CSS Box Shadow — Các câu hỏi thường gặp

What is CSS box-shadow?

box-shadow is a CSS property that adds shadow effects around an element. It accepts X offset, Y offset, blur radius, spread radius, color, and an optional inset keyword.

Can I apply multiple shadows?

Yes, separate multiple shadows with commas: box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is Trình tạo CSS Box Shadow really free to use?

Yes, Trình tạo CSS Box Shadow is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Sẵn sàng sử dụng Trình tạo CSS Box Shadow?

Công cụ trực tuyến miễn phí — hoạt động trong trình duyệt, không cần đăng ký. Bắt đầu sử dụng ngay bây giờ.

Dùng thử ngay