Text Shadow CSS: Sintaks, Glow, Outline dan Contoh

Cara kerja text-shadow

text-shadow menggambar salinan teks di belakangnya, digeser dan dikaburkan. Kamu memberinya offset horizontal, offset vertikal, blur yang opsional, dan sebuah warna.

<!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 berarti 3px ke kanan (secara fisik, di arah tulisan apa pun), 3px ke bawah, tanpa blur, berwarna kuning. Bayangan kedua dikaburkan 6px dan memakai hitam semi-transparan, resep yang umum untuk efek kedalaman yang halus.

Sintaks

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

text-shadow: none menghapus bayangan yang diwariskan. Ubah nilai-nilai di bawah untuk melihat efek masing-masing:

<!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>

Coba -4px -4px 0 #16a34a, 0 0 10px red, dan dua bayangan yang dipisahkan koma.

Beberapa bayangan: glow, outline, dan 3D

Koma menumpuk bayangan, dan bayangan pertama digambar paling atas. Tiga efek berasal dari satu aturan itu:

<!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>

• Glow: offset nol, blur yang makin besar, di atas latar gelap.
• Outline: empat bayangan tegas, satu untuk setiap arah diagonal. Cara ini cocok untuk outline tipis. Untuk outline yang lebih tebal dan rata, -webkit-text-stroke: 2px #111827 (didukung di semua browser versi terbaru meskipun memakai prefix) menggambar garis di tepi huruf.
• 3D: serangkaian bayangan tegas yang masing-masing bergeser 1px lebih jauh, sehingga hurufnya terlihat timbul.

Menjaga teks tetap terbaca di atas latar yang ramai

Teks putih di atas foto atau pola kehilangan tepinya di bagian latar yang terang. Bayangan gelap yang lembut mengembalikan tepinya tanpa kotak yang terlihat:

<!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>

Bayangan memang membantu, tetapi tidak menjamin kontras. Untuk teks panjang di atas gambar, tambahkan juga lapisan warna solid atau gradien di belakang teksnya.

text-shadow vs box-shadow

Untuk bayangan pada kartu dan tombol, lihat box-shadow.

Kesalahan yang sering terjadi

• Bayangan tebal dan gelap pada teks paragraf. Bayangan seperti itu mengaburkan bentuk huruf. Pakai bayangan untuk judul dan label pendek saja.
• Lupa offset kedua. text-shadow: 2px #000 tidak valid, karena kedua offset wajib ada.
• Blur negatif. Nilai ini tidak valid, dan seluruh deklarasinya dibuang.
• Mengira bayangan memakan ruang. Bayangan hanya digambar, jadi bayangan besar bisa menimpa baris berikutnya atau terpotong oleh overflow: hidden.
• Efek glow di atas latar terang. Glow terang di atas putih tidak terlihat. Glow butuh latar yang gelap.