Text shadow CSS: cú pháp, hiệu ứng phát sáng, viền và ví dụ

text-shadow hoạt động thế nào

text-shadow vẽ một bản sao của chữ phía sau nó, được dịch đi và làm nhòe. Bạn cho nó độ lệch ngang, độ lệch dọc, độ nhòe (không bắt buộc) và một màu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 36px; font-weight: 700; color: #111827; }
    p { margin: 12px 0; }
    .hard { text-shadow: 3px 3px 0 #f59e0b; }
    .soft { text-shadow: 2px 2px 6px rgb(0 0 0 / 35%); }
  </style>
</head>
<body>
  <p class="hard">Hard shadow</p>
  <p class="soft">Soft shadow</p>
</body>
</html>

3px 3px 0 #f59e0b nghĩa là dịch sang phải 3px (theo hướng vật lý, với mọi hướng viết), xuống dưới 3px, không nhòe, màu hổ phách. Bóng thứ hai nhòe 6px và dùng màu đen bán trong suốt, đây là công thức quen thuộc để tạo chiều sâu nhẹ nhàng.

Cú pháp

text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?;

text-shadow: none gỡ bỏ bóng được kế thừa. Thay đổi các giá trị bên dưới để xem tác dụng của từng giá trị:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { font-size: 44px; font-weight: 800; margin: 16px 0; }
  </style>
</head>
<body>
  <label>text-shadow: <input id="val" value="4px 4px 8px #2563eb" size="28"></label>
  <p id="sample">Shadow</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.textShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).textShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Thử -4px -4px 0 #16a34a, 0 0 10px red và hai bóng ngăn cách bằng dấu phẩy.

Nhiều lớp bóng: phát sáng, viền chữ và 3D

Dấu phẩy giúp xếp chồng các bóng; bóng đầu tiên được vẽ trên cùng. Chỉ với quy tắc đó, bạn có ba hiệu ứng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacked shadows</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 40px; font-weight: 800; margin: 0; }
    div { padding: 12px 16px; }
    .neon {
      background: #111827; color: #eff6ff;
      text-shadow: 0 0 4px #93c5fd, 0 0 12px #3b82f6, 0 0 24px #2563eb;
    }
    .outline {
      color: #ffffff;
      text-shadow: -2px -2px 0 #111827, 2px -2px 0 #111827,
                   -2px 2px 0 #111827, 2px 2px 0 #111827;
    }
    .deep {
      color: #f59e0b;
      text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309,
                   3px 3px 0 #b45309, 4px 4px 0 #92400e;
    }
  </style>
</head>
<body>
  <div class="neon">Neon glow</div>
  <div class="outline">Outlined</div>
  <div class="deep">3D text</div>
</body>
</html>

• Phát sáng: độ lệch bằng 0, độ nhòe tăng dần, trên nền tối.
• Viền chữ: bốn bóng sắc nét, mỗi bóng theo một đường chéo. Cách này hợp với viền mảnh; muốn viền dày và đều hơn, -webkit-text-stroke: 2px #111827 (được mọi trình duyệt hiện nay hỗ trợ dù có tiền tố) sẽ vẽ nét viền ngay trên mép chữ.
• 3D: một loạt bóng sắc nét, mỗi bóng lệch thêm 1px, khiến chữ trông như được đùn nổi lên.

Giữ chữ dễ đọc trên nền rối mắt

Chữ trắng trên ảnh hoặc họa tiết sẽ mất mép ở những chỗ nền sáng. Một bóng tối và mềm giúp lấy lại đường nét mà không cần thêm khung nền nào:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Readable on a pattern</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      padding: 32px 16px;
      background: repeating-linear-gradient(45deg, #fde68a 0 20px, #ffffff 20px 40px);
      font-size: 32px; font-weight: 800; color: #ffffff;
    }
    .with { text-shadow: 0 1px 3px rgb(0 0 0 / 70%), 0 0 12px rgb(0 0 0 / 40%); }
  </style>
</head>
<body>
  <div class="hero">Without a shadow</div>
  <div class="hero with">With a shadow</div>
</body>
</html>

Bóng có ích, nhưng không đảm bảo đủ độ tương phản. Với đoạn chữ dài trên ảnh, hãy thêm một lớp phủ màu đặc hoặc gradient phía sau chữ.

text-shadow và box-shadow

Để đổ bóng cho thẻ (card) và nút, xem box-shadow.

Lỗi thường gặp

• Bóng đậm, tối trên chữ nội dung. Chúng làm nhòe hình dạng chữ. Chỉ nên dùng bóng cho tiêu đề và nhãn ngắn.
• Quên độ lệch thứ hai. text-shadow: 2px #000 không hợp lệ; cả hai độ lệch đều bắt buộc.
• Độ nhòe âm. Giá trị này không hợp lệ và cả khai báo bị bỏ qua.
• Tưởng bóng chiếm chỗ. Bóng chỉ được vẽ lên; bóng lớn có thể đè lên dòng kế tiếp hoặc bị cắt bởi overflow: hidden.
• Hiệu ứng phát sáng trên nền sáng. Ánh sáng nhạt trên nền trắng gần như vô hình. Hiệu ứng phát sáng cần nền tối.