Tạo bóng đổ CSS
Tạo bóng đổ hộp CSS
Chạy trong trình duyệt · Không tải lên
Hiện tại công cụ này và hướng dẫn trên trang vẫn bằng tiếng Anh. Nó hoạt động y như vậy: mọi thứ chạy trong trình duyệt của bạn.
Shadow layers
Box and background
Ready-made
Trình duyệt của bạn quá cũ để chạy công cụ này. Hãy cập nhật, hoặc dùng phiên bản hiện tại của Chrome, Edge, Firefox hoặc Safari.
- Không có gì rời khỏi thiết bị của bạn
- Máy chủ không giới hạn kích thước
- Không đăng ký, không hình mờ
- Miễn phí
How to make a box shadow
- Start from a ready-made shadow, or adjust the sliders.
- Add layers: a tight shadow plus a wide, soft one looks most natural.
- Copy the CSS.
Tips
- Low opacity (8 to 20%) and a negative spread give soft, modern shadows.
- Inset shadows look pressed in, for inputs and toggles.
- Change the box and background colors to see the shadow on your own design.
Câu hỏi thường gặp
Does box-shadow slow down a page?
Rarely. Very large blurs on many moving elements can, so keep animated shadows simple.
Is anything uploaded?
No. The preview is drawn by your browser.