Çalıştırılabilir CSS Dokümanları: Metin gölgesi

Q: text-shadow söz dizimi nedir?

text-shadow: offset-x offset-y blur-radius color;, örneğin text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. İki uzaklık zorunludur; bulanıklığın varsayılanı 0, rengin varsayılanı metin rengidir.

Q: Birden fazla metin gölgesi nasıl eklenir?

Gölgeleri virgülle ayır: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. İlk gölge, ardından gelenlerin üstüne çizilir.

Q: text-shadow'un box-shadow gibi spread değeri var mı?

Hayır. text-shadow'un spread değeri ve inset anahtar kelimesi yoktur. Harflerin çevresindeki gölgeyi kalınlaştırmak için birkaç gölgeyi üst üste koy ya da kontur için -webkit-text-stroke kullan.

CSS Metin Gölgesi (text-shadow): Parlama, Kontur ve Örnekler

text-shadow metnin arkasına bir ya da daha fazla gölge çizer. Dört değeri (x uzaklığı, y uzaklığı, bulanıklık, renk), parlama, kontur ve 3B efektleri için gölgeleri üst üste koymayı ve kalabalık arka planlarda metni okunaklı tutmak için gölge kullanmayı öğren.

Bu sayfada çalıştırılabilir editörler var - düzenle, çalıştır ve sonucu anında gör.

Yazan Kevin Spektor, Co-founder & CTO

Sep 24, 2026 tarihinde yayınlandı

text-shadow nasıl çalışır

text-shadow, metnin kaydırılmış ve bulanıklaştırılmış bir kopyasını arkasına boyar. Ona bir yatay uzaklık, bir dikey uzaklık, isteğe bağlı bir bulanıklık ve bir renk verirsin.

<!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 3px sağa (fiziksel, her yazı yönünde), 3px aşağı, bulanıklık yok, kehribar rengi demektir. İkinci gölge 6px bulanıklaşıyor ve yarı saydam bir siyah kullanıyor; hafif bir derinlik efekti için olağan tarif budur.

Söz dizimi

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

Değer	Zorunlu	Anlamı
offset-x	Evet	Pozitif gölgeyi sağa, negatif sola taşır
offset-y	Evet	Pozitif aşağı, negatif yukarı taşır
blur-radius	Hayır (varsayılan 0)	Kenarın ne kadar yumuşak olduğu; negatif değerler geçersizdir
color	Hayır (varsayılan metin rengi)	Başta ya da sonda gelebilir

text-shadow: none miras alınan bir gölgeyi kaldırır. Her birinin etkisini görmek için aşağıdaki değerleri değiştir:

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

-4px -4px 0 #16a34a, 0 0 10px red ve virgülle ayrılmış iki gölge dene.

Birden fazla gölge: parlama, kontur ve 3B

Virgüller gölgeleri üst üste koyar; ilki en üste çizilir. O tek kuraldan üç efekt çıkar:

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

Parlama: sıfır uzaklık, artan bulanıklık, koyu bir arka planda.
Kontur: her köşegen için bir tane olmak üzere dört sert gölge. İnce konturlar için çalışır; daha kalın ve düzgün bir kontur için -webkit-text-stroke: 2px #111827 (öneke rağmen bütün güncel tarayıcılarda desteklenir) bunun yerine harf kenarlarına bir çizgi çizer.
3B: her biri 1px daha uzakta olan bir dizi sert gölge; harfler kabartılmış gibi görünür.

Kalabalık bir arka planda metni okunaklı tutmak

Bir fotoğrafın ya da desenin üzerindeki beyaz metin, arka planın açık olduğu yerlerde kenarlarını kaybeder. Yumuşak koyu bir gölge, görünür bir kutu olmadan onları geri getirir:

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

Gölge yardımcı olur, ama kontrastın garantisi değildir. Bir resmin üzerindeki uzun metin için metnin arkasına düz ya da gradyanlı bir katman da ekle.

text-shadow ve box-shadow

	text-shadow	box-shadow
Takip ettiği	Harf şekilleri	Elementin kutusu (ve köşe yuvarlaklığı)
Spread değeri	Hayır	Evet
`inset`	Hayır	Evet
Virgülle ayrılmış birden fazla	Evet	Evet

Kartlardaki ve butonlardaki gölgeler için box-shadow sayfasına bak.

Sık yapılan hatalar

Gövde metninde ağır, koyu gölgeler. Harf şekillerini bulanıklaştırır. Gölgeleri başlıklar ve kısa etiketler için sakla.
İkinci uzaklığı unutmak. text-shadow: 2px #000 geçersizdir; iki uzaklık da zorunludur.
Negatif bir bulanıklık. Geçersizdir ve bildirimin tamamı atılır.
Gölgenin yer kaplamasını beklemek. Yalnızca boyanır; büyük gölgeler bir sonraki satırla çakışabilir ya da overflow: hidden tarafından kesilebilir.
Açık arka planlarda parlama efektleri. Beyaz üzerinde açık bir parlama görünmez. Parlamalar koyu bir arka plan ister.

Sıkça Sorulan Sorular

text-shadow söz dizimi nedir?

text-shadow: offset-x offset-y blur-radius color;, örneğin text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. İki uzaklık zorunludur; bulanıklığın varsayılanı 0, rengin varsayılanı metin rengidir.

Birden fazla metin gölgesi nasıl eklenir?

Gölgeleri virgülle ayır: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. İlk gölge, ardından gelenlerin üstüne çizilir.

Metne parlama efekti nasıl verilir?

Uzaklığı olmayan ve bulanıklığı olan gölgeler kullan, çoğu zaman bulanıklığı artan birkaç tane: text-shadow: 0 0 4px #60a5fa, 0 0 12px #2563eb;. Koyu bir arka planda neon parlama gibi görünür.

text-shadow'un box-shadow gibi spread değeri var mı?

Hayır. text-shadow'un spread değeri ve inset anahtar kelimesi yoktur. Harflerin çevresindeki gölgeyi kalınlaştırmak için birkaç gölgeyi üst üste koy ya da kontur için -webkit-text-stroke kullan.

text-shadow düzeni etkiler mi?

Hayır. Gölge yalnızca boyanır; yer kaplamaz ve çevredeki içeriği hareket ettirmez, bu yüzden büyük bir gölge yakındaki elementlerle çakışabilir.

İlgili kavramlar