Máy tạo bóng hộp

Thiết kế các bóng hộp nhiều lớp với độ lệch, độ mờ, độ lan rộng và màu sắc. Xem trước trên thẻ, sau đó sao chép CSS chỉ bằng một cú nhấp chuột.

Box Shadow Generator

Live

Offset X8px

Offset Y16px

Blur32px

Spread-4px

Opacity35%

Card radius24px

Shadow color

Inset

Preview card

CSS output

box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35);
border-radius: 24px;

Key capabilities

Thiết kế các bóng hộp xếp lớp với độ lệch, độ mờ, độ trải và màu sắc - bao gồm cả bản xem trước trực tiếp.
Chạy trong trình duyệt của bạn
Miễn phí sử dụng

Cách sử dụng

Điều chỉnh độ lệch, độ mờ và độ lan rộng.
Chọn màu và độ mờ (hoặc thêm lớp).
Sao chép CSS bóng hộp.

How this tool works

Điều chỉnh độ lệch, độ mờ và độ lan rộng.
Chọn màu và độ mờ (hoặc thêm lớp).
Sao chép CSS bóng hộp.

Recommended settings

Trước tiên hãy sử dụng các tùy chọn mặc định, sau đó điều chỉnh nếu cần

Supported formats

Text / on-page input

File size and limits

Bản xem trước nhiều lớp rất phức tạp có thể có cảm giác chậm hơn trên điện thoại cũ.

Privacy

Trình tạo màu & CSS chạy hoàn toàn trong trình duyệt của bạn. Bản xem trước và chuyển đổi không bao giờ tải lên kiểu của bạn.

Common use cases

Sử dụng Box Shadow Generator bất cứ khi nào bạn cần: Thiết kế các bóng hộp theo lớp với độ lệch, độ mờ, độ lan rộng và màu sắc - bao gồm cả bản xem trước trực tiếp.

Troubleshooting

Xem trước trông khác sau khi dán

Kiểm tra CSS cạnh tranh trên trang của bạn (đặt lại, màu kế thừa). Trước tiên hãy sao chép quy tắc đã tạo vào biểu định kiểu riêng biệt.

Câu hỏi thường gặp

Điều này có tải lên CSS của tôi không?

Không. Trình tạo và bộ chuyển đổi chạy trong trình duyệt của bạn với bản xem trước trực tiếp.

Tôi có cần một tài khoản không?

Không. Mở công cụ, điều chỉnh các điều khiển và sao chép CSS.