Tạo chữ trắng có bóng đen với CSS (text-shadow)

Thuộc tính text-shadow

text-shadow thêm bóng cho văn bản. Cú pháp: text-shadow: x-offset y-offset blur-radius color;. Có thể thêm nhiều bóng cách nhau bằng dấu phẩy.

Cú pháp chi tiết

text-shadow: 
  <offset-x> <offset-y> <blur-radius>? <color>#,
  <offset-x> <offset-y> <blur-radius>? <color>#; /* nhiều bóng */

/* Tham số: */
  /* offset-x: ngang (+ phải, - trái) */
  /* offset-y: dọc (+ xuống, - lên) */
  /* blur-radius: độ mờ (mặc định 0, không âm) */
  /* color: màu bóng (mặc định currentColor) */

Ví dụ: Chữ trắng, bóng đen

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: white;
      text-shadow: 3px 3px 3px #000000;  /* 右3px, 下3px, 模糊3px, 黑色 */
    }
  </style>
</head>
<body>
  <h1>Heading One</h1>
  <p>Above heading has a text shadow effect.</p>
</body>
</html>

Các hiệu ứng phổ biến

Hiệu ứng	CSS
Bóng đơn giản	`text-shadow: 2px 2px 4px rgba(0,0,0,0.5);`
Bóng mờ lớn (glow)	`text-shadow: 0 0 10px rgba(255,255,255,0.8);`
Chữ khắc (inset/engraved)	`color: #ccc; text-shadow: 0 -1px 0 #fff, 0 1px 0 #999;`
Chữ nổi (embossed)	`color: #ccc; text-shadow: 0 1px 0 #fff, 0 -1px 0 #999;`
Neon glow	`text-shadow: 0 0 5px #fff, 0 0 10px #ff00de, 0 0 20px #ff00de;`
Multiple layers	`text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #c9c9c9, 3px 3px 0 #bbb, 4px 4px 6px rgba(0,0,0,0.3);`
Outline (viền chữ)	`text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;`

Ví dụ: Nhiều bóng (Multiple shadows)

h1 {
  color: white;
  text-shadow: 
    0 0 3px red,      /* Bóng đỏ nhỏ */
    0 0 6px orange,   /* Bóng cam lớn hơn */
    0 0 9px yellow;   /* Bóng vàng lớn nhất */
}

Lưu ý hiệu suất & Accessibility

Quá nhiều shadow layers ảnh hưởng performance (đặc biệt animation).
Đảm bảo độ tương phản (contrast) đủ cho người khuyết tật thị lực.
text-shadow không làm tăng kích thước box model (khác box-shadow).
Kết hợp với filter: drop-shadow() cho SVG/icon font.