Trình tạo Text Shadow
Công cụ tạo CSS text-shadow đặt độ lệch, độ mờ, màu và độ trong suốt của bóng chữ với xem trước trực tiếp, và cho phép bạn xếp nhiều lớp bóng để tạo chữ phát sáng, viền chữ và chữ 3D.
Về công cụ này
Công cụ tạo CSS text-shadow đặt độ lệch, độ mờ, màu và độ trong suốt của bóng chữ với xem trước trực tiếp, và cho phép bạn xếp nhiều lớp bóng để tạo chữ phát sáng, viền chữ và chữ 3D.
Cách sử dụng
- Điều chỉnh độ lệch ngang, độ lệch dọc và độ mờ.
- Chọn màu và độ trong suốt của bóng, cùng màu chữ và cỡ chữ.
- Bấm Add Layer để thêm một lớp bóng; Reset Layers để làm lại từ đầu.
- Bấm Copy CSS.
Điều nên biết
- Cú pháp text-shadow là: offset-x offset-y blur-radius color.
- Khác với box-shadow, text-shadow không có giá trị spread hay từ khóa inset.
- Nhiều bóng được phân tách bằng dấu phẩy, và bóng đầu tiên được vẽ trên cùng.
- Bóng có độ lệch bằng 0 kèm độ mờ sẽ tạo hiệu ứng phát sáng.
- Xếp chồng nhiều lớp lệch 1 px tạo ra hiệu ứng 3D hoặc chữ in nổi.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Làm sao để đổ bóng cho chữ bằng CSS?
Dùng text-shadow, ví dụ text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
Làm sao để tạo chữ phát sáng?
Dùng độ lệch bằng 0 kèm độ mờ và một màu sáng, ví dụ text-shadow: 0 0 8px #1db954; xếp nhiều lớp để phát sáng mạnh hơn.
Có thể dùng nhiều hơn một text-shadow không?
Có. Phân tách các bóng bằng dấu phẩy; công cụ này sẽ thêm từng lớp giúp bạn.
text-shadow có ảnh hưởng đến độ dễ đọc không?
Bóng nhẹ có thể giúp chữ dễ đọc hơn trên nền ảnh, nhưng bóng đậm làm giảm độ rõ nét — hãy kiểm tra độ tương phản bằng công cụ kiểm tra tương phản.