Thêm nhiều bóng cho văn bản với CSS (Multiple text-shadow)

Multiple Text Shadows - Nhiều lớp bóng chữ

Thuộc tính text-shadow chấp nhận **danh sách các bóng cách nhau bởi dấu phẩy**. Mỗi bóng: `offset-x offset-y blur-radius color`. Render theo thứ tự: bóng đầu tiên ở trên cùng.

Cú pháp

text-shadow: 
  shadow1, 
  shadow2, 
  shadow3,
  ...;

/* Mỗi shadow: */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

Ví dụ: 3 lớp bóng màu khác nhau

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: white;
      font-size: 48px;
      font-weight: bold;
      text-shadow: 
        0 0 3px red,      /* Bóng đỏ nhỏ - gần nhất */
        0 0 6px green,    /* Bóng xanh lá trung bình */
        0 0 9px blue;     /* Bóng xanh lam lớn - xa nhất */
    }
  </style>
</head>
<body>
  <h1>Heading One</h1>
  <p>Above heading has multiple text shadow effects.</p>
</body>
</html>

Kỹ thuật Layering (Chồng lớp)

Bóng đầu tiên = lớp trên cùng. Để tạo hiệu ứng "glow" nhiều màu:

.neon-glow {
  color: white;
  text-shadow: 
    0 0 2px #fff,       /* Core trắng */
    0 0 5px #ff00de,    /* Hồng neon */
    0 0 10px #ff00de,   /* Hồng lan toả */
    0 0 20px #ff00de,   /* Hồng xa hơn */
    0 0 40px #ff00de;   /* Hồng rất xa */
}

Các hiệu ứng đẹp mắt

Tên hiệu ứng	CSS
Neon	`text-shadow: 0 0 5px #fff, 0 0 10px #ff00de, 0 0 20px #ff00de, 0 0 40px #ff00de;`
Fire	`text-shadow: 0 0 5px #fff, 0 0 10px #ff8c00, 0 0 20px #ff4500, 0 0 40px #8b0000;`
3D/Extrude	`text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #c9c9c9, 3px 3px 0 #bbb, 4px 4px 6px rgba(0,0,0,0.3);`
Retro/Outline	`text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;`
Inset/Engraved	`color: #666; text-shadow: 0 1px 0 #fff, 0 -1px 0 #333;`
Rainbow	`text-shadow: 2px 2px 0 red, 4px 4px 0 orange, 6px 6px 0 yellow, 8px 8px 0 green, 10px 10px 0 blue, 12px 12px 0 indigo, 14px 14px 0 violet;`

Animation Text Shadow

@keyframes neonPulse {
  0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #ff00de, 0 0 20px #ff00de; }
  50% { text-shadow: 0 0 2px #fff, 0 0 5px #ff00de, 0 0 10px #ff00de; }
}
.neon { animation: neonPulse 1.5s ease-in-out infinite; }

Lưu ý hiệu suất

Mỗi shadow layer = thêm 작업 render. Hạn chế < 5 layers.
Tránh animate `text-shadow` trực tiếp (không GPU accelerated). Dùng `filter: drop-shadow()` cho animation.
Đảm bảo contrast ratio cho accessibility (WCAG AA: 4.5:1).