Công cụ tạo CSS Text Shadow

Tạo Text Shadow là gì?

Công cụ này dựng thuộc tính CSS text-shadow từ một hoặc nhiều lớp. Mỗi lớp có độ lệch ngang, độ lệch dọc, độ mờ, màu và độ trong suốt, và phần xem trước hiển thị chữ mẫu của chính bạn với kết quả.

Cách sử dụng Tạo Text Shadow

1. Bắt đầu từ một mẫu có sẵn như Phát sáng, Cổ điển, Viền chữ hoặc Chạm nổi, hoặc giữ bóng mặc định.
2. Chọn một lớp và đặt Độ lệch ngang, Độ lệch dọc, Độ mờ, Màu bóng và Độ trong suốt.
3. Thêm lớp để tạo viền chữ hoặc hiệu ứng 3D xếp chồng; xóa các lớp không cần.
4. Gõ Chữ mẫu của bạn và chọn màu chữ, màu nền để kiểm tra độ dễ đọc.
5. Sao chép mã CSS.

Ví dụ

x 3px, y 3px, độ mờ 0, màu #ff0000, độ trong suốt 1

text-shadow: 3px 3px 0 #ff0000;

Khi nào nên dùng Tạo Text Shadow

Dùng cho tiêu đề, chữ banner, hiệu ứng neon hoặc retro và bóng nhẹ giúp tăng tương phản trên nền ảnh. Để có viền thật cho chữ lớn, -webkit-text-stroke cho kết quả sắc nét hơn bóng xếp chồng; tránh bóng đậm trên chữ nội dung vì chúng làm giảm khả năng đọc.

Tạo Text Shadow hoạt động như thế nào

Mỗi lớp được viết dạng x y blur color (text-shadow không có độ lan hay inset). Độ lệch và độ mờ là giá trị px, độ trong suốt được áp vào alpha của màu, cho ra hex với màu đục và rgba() trong trường hợp còn lại. Các lớp cách nhau bằng dấu phẩy; lớp đầu tiên được vẽ trên cùng. Mẫu viền chữ dùng bốn độ lệch 1px theo mỗi hướng chéo, cách thông dụng thuần CSS để giả lập viền chữ.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Tiêu đề phát sáng kiểu neon
• ✓ Chữ trắng dễ đọc trên nền ảnh
• ✓ Tiêu đề 3D xếp chồng kiểu retro
• ✓ Giả lập viền chữ không cần SVG
• ✓ Nhãn chạm nổi hoặc kiểu in nổi

Câu Hỏi Thường Gặp

Khám phá thêm danh mục