CSS Text Shadow - Tạo Bóng Cho Văn Bản

Bóng chữ làm tiêu đề nổi bật, thu hút mắt người dùng. Thuộc tính text-shadow thêm hiệu ứng bóng cho văn bản.

Cú Pháp Text Shadow

text-shadow: offset-x offset-y blur-radius color;

Thành phần:

• offset-x: Dịch chuyển ngang (bắt buộc)
• offset-y: Dịch chuyển dọc (bắt buộc)
• blur-radius: Độ mờ bóng (tùy chọn)
• color: Màu bóng (mặc định đen, tùy chọn)

Cú pháp tương tự box-shadow (bóng cho hộp).

HTML Mẫu Cho Các Ví Dụ

<h1>Career Karma</h1>
h1 { color: lightblue; }

Các Loại Bóng Chữ

1. Bóng Cơ Bản (Chỉ offset-x, offset-y)

h1 { text-shadow: 1px 1px; }

Bóng đen lệch 1px ngang và dọc.

2. Bóng Có Màu

h1 { text-shadow: 1px 1px pink; }

Bóng hồng lệch 1px.

3. Bóng Có Hiệu Ứng Mờ (Blur)

h1 { text-shadow: 3px 3px 2px pink; }

Bóng hồng lệch 3px, mờ 2px. Tăng blur-radius để mờ mạnh hơn.

4. Nhiều Bóng (Multiple Shadows)

Danh sách cách nhau bởi dấu phẩy. Giá trị offset phải tăng dần để không bị đè.

h1 { text-shadow: 3px 3px 2px pink, 6px 6px 5px orange; }

Kết Luận

text-shadow thêm bóng cho văn bản (header, paragraph...). Hỗ trợ offset, màu, blur, nhiều bóng. Bạn đã nắm vững - hãy tạo tiêu đề ấn tượng!