Công cụ tạo hiệu ứng đổ bóng CSS (Box Shadow)
Thiết kế hiệu ứng đổ bóng trực quan với khả năng xem trước theo thời gian thực. Thêm nhiều lớp đổ bóng, tùy chỉnh mọi thông số và sao chép mã CSS.
Công cụ tạo hiệu ứng đổ bóng CSS (Box Shadow) là gì?
Công cụ tạo hiệu ứng đổ bóng CSS (box-shadow) giúp bạn tạo hiệu ứng đổ bóng cho các phần tử HTML mà không cần viết mã thủ công. Bạn điều chỉnh các thông số như offset ngang/dọc, bán kính mờ, độ lan tỏa, màu sắc và độ trong suốt bằng các điều khiển trực quan, và công cụ sẽ tạo ra giá trị thuộc tính CSS chính xác cho bạn.
Cách tạo hiệu ứng đổ bóng
- Điều chỉnh offset — Sử dụng thanh trượt X và Y để định vị bóng
- Đặt độ mờ & lan tỏa — Kiểm soát độ mềm mại và kích thước của bóng
- Chọn màu — Chọn màu bóng và điều chỉnh độ trong suốt của nó
- Chuyển đổi inset — Chuyển đổi giữa bóng ngoài và bóng trong
- Thêm lớp — Xếp nhiều lớp bóng cho các hiệu ứng phức tạp
- Sao chép CSS — Nhấp vào nút sao chép để lấy mã cuối cùng
Tại sao nên sử dụng công cụ tạo hiệu ứng đổ bóng này?
- Chỉnh sửa trực quan — Xem các thay đổi bóng theo thời gian thực trên hộp xem trước
- Nhiều lớp — Kết hợp tối đa 5 lớp bóng cho hiệu ứng chiều sâu
- Kiểm soát chính xác — Tinh chỉnh offset, độ mờ, độ lan tỏa, độ trong suốt và inset một cách độc lập
- Đầu ra sạch — Nhận CSS được định dạng đúng cách, sẵn sàng dán vào biểu định kiểu của bạn
- Quyền riêng tư — Mọi thứ chạy cục bộ trong trình duyệt của bạn
So sánh FreeToolbox với các công cụ tạo bóng khác
| Tính năng | FreeToolbox | cssmatic.com | shadows.brumm.af |
|---|---|---|---|
| Nhiều lớp | Tối đa 5 | Một lớp | Không giới hạn |
| Chuyển đổi Inset | Có | Có | Không |
| Kiểm soát độ trong suốt | Có | Hạn chế | Có |
| Quảng cáo | Tối thiểu | Nhiều | Không có |
| Giao diện tối | Có | Không | Có |
Câu hỏi thường gặp
Sự khác biệt giữa độ mờ (blur) và độ lan tỏa (spread) là gì?
Độ mờ kiểm soát độ mềm/khuếch tán của các cạnh bóng. Độ lan tỏa kiểm soát mức độ bóng mở rộng hoặc co lại so với kích thước của phần tử. Độ lan tỏa dương làm cho nó lớn hơn, âm làm cho nó nhỏ hơn.
Tôi có thể thêm nhiều bóng không?
Có. Nhấp vào 'Thêm lớp' để xếp tối đa 5 lớp bóng. Mỗi lớp có các điều khiển độc lập cho tất cả các thông số.
Inset có tác dụng gì?
Inset di chuyển bóng vào bên trong phần tử thay vì bên ngoài, tạo ra bóng trong hoặc hiệu ứng ép vào.
Nó có hoạt động cho text-shadow không?
Công cụ này tạo ra CSS box-shadow. Text-shadow sử dụng cú pháp tương tự nhưng không có giá trị lan tỏa hoặc tùy chọn inset. Bạn có thể điều chỉnh đầu ra theo cách thủ công.
Công cụ này có miễn phí không?
Có, hoàn toàn miễn phí, không giới hạn hoặc yêu cầu đăng ký.