CSS Box-Shadow Rehberi: Sözdizimi, Bulanıklık, Yayılım ve Performans

Bir sitedeki gölge aracından kopyaladığınız bir gölgeyi stil sayfasına yapıştırıyorsunuz ve sonuç önizlemede gördüğünüzden çok farklı çıkıyor. Bulanıklık devasa, eleman sayfadan onlarca piksel havada asılı duruyor, ikinci bir gölge eklemekse tüm efekti yok ediyor. Sorun box-shadow'ın zor olması değil — geliştiricilerin beş değerin her birinin gerçekte neyi kontrol ettiğini hiç öğrenmemiş olması. Bu rehber özelliği parçalara ayırıyor, bulanıklık ile yayılım arasındaki farkı açıklıyor, katmanlı gölgeleri gösteriyor, erişilebilirlik tuzaklarını ve performans fırsatlarını kapsıyor.

Her box-shadow'ın arkasındaki beş değer

Tam bir box-shadow bildirimi şöyle görünür:

box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.25);

Soldan sağa okuyun. 4px offset-x değeridir — gölgeyi yatayda ne kadar kaydırır. 6px offset-y değeridir — dikey kaymasıdır. Bu ikisi minimum gereklidir; bunlar olmadan gölge elemanın tam arkasında, tam ortada oturur — pratikte pek yararlı değildir. 12px blur-radius değeridir. Gölgenin ne kadar yumuşatılacağını kontrol eder — gölgeyi taşımaz, kenarlarını tüyler. 0 spread-radius değeridir. Pozitif bir değer gölgeyi elemanın kutusunun ötesine genişletir; negatif değer daraltır. Ve rgba(0, 0, 0, 0.25) %25 opaklıkla gölge rengidir.

İsteğe bağlı olarak altıncı bir değer daha vardır: inset anahtar sözcüğü. Mevcut olduğunda gölge elemanın dışına değil, içine çizilir. Inset gölgeler iç derinlik yaratmanın standart yoludur — input alanları, basılmış butonlar, içbükey kartlar. Anahtar sözcüğü atlandığında tüm gölgeler varsayılan olarak dışarıya düşer.

Bulanıklık yarıçapı versus yayılım yarıçapı: saatler harcayan karışıklık

Bu iki değer en sık değiştirilenlerdir ve görsel fark dramatiktir. Bulanıklık yarıçapı gölgeyi büyük ya da küçük yapmaz — gölge kenarının ne kadar keskin olarak saydama geçtiğini kontrol eder. 0 blur değeri, elemanla aynı siluetin keskin kenarlı bir gölgesini üretir. 20px blur değeri ise elemanın çok ötesine yayılıp solan geniş, yumuşak bir gradyan oluşturur. Tarayıcı bunu elemanın altında birleştirmeden önce gölge bitmap'i üzerinde Gaussian bulanıklığı olarak uygular.

Yayılım yarıçapı ise doğrudan geometrik bir işlemdir. Herhangi bir bulanıklık uygulanmadan önce gölge dikdörtgenini şişirir veya daraltır. 4px yayılımı gölgeyi her taraftan 4px büyütür; -4px ise 4px küçültür. Pratik etki: yayılım gölgenin ne kadar görünür olduğunu, bulanıklık ise ne kadar yumuşak göründüğünü belirler. Yükseltilmiş bir kart için sık kullanılan bir numara, bulanıklığı makul tutup yayılımı sıfır ya da hafif negatif yapmaktır — bu, büyük bulanıklığın yayılım ayarı olmadan yarattığı "karanlık halo" sorununu önler.

Katmanlı gölgeler: tek özellik, birden fazla değer

CSS, virgülle ayırarak aynı elemana birden fazla gölge yığılmasına izin verir. Her katman ilkten sona doğru işlenir — ilk gölge üsttedir ve her sonraki gölge arkasına oturur. Gerçekçi derinlik efektleri böyle oluşturulur: tek bir gölge düz ve yapay görünür, ancak iki ya da üç özenle ayarlanmış katman, gözlerimizin gerçek nesnelerle ilişkilendirdiği nüanslı gölgelemeyi üretir.

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.08);
}

Bu örnekte ilk gölge, kartın hemen altındaki sıkı, düşük opaklıklı bir vurgudur — yüzeyin masayla buluştuğu teması gölgesini simüle eder. İkincisi, ana yükseltme hissini yaratan orta menzilli yumuşak yayılımdır. Üçüncüsü ise genel ortam ışığını ima eden geniş, hafif bir yıkama. Sonuç, düz bir gri leke yerine doğal derinlik olarak okunur.

Yaygın hatalar ve nasıl düzeltilir

En sık yapılan hata, elemanın boyutuna göre çok büyük bir bulanıklık değeri kullanmaktır. 36px yüksekliğindeki bir butonda 60px blur olmaz — sonuç, elemanı yüzeyden tamamen kopartan bir difüz buluttur. Kaba bir kural olarak, doğal görünümlü yükseltme için bulanıklığı elemanın kısa boyutunun 0,5× ile 2× arasında tutun.

İkinci hata, örtük ikinci katmanı unutmaktır. Tasarımdaki "gölge" genellikle tasarımcının Figma veya Sketch'te iki ya da üç box-shadow üst üste koymasıyla görünür hale gelir. Yalnızca en üstteki görünür gölgeyi kopyalamak, çok keskin ya da çok karanlık bir gölge üretir. Mockup'ın katmanlı gölge kullanıp kullanmadığını her zaman kontrol edin — neredeyse her zaman kullanır.

Üçüncü tuzak, filter: drop-shadow() ile box-shadow'ı birbirinin yerine kullanmaktır. Aynı şey değildirler. Box-shadow elemanın dikdörtgen border-box'ini takip ederken, drop-shadow saydamlık alfasını takip eder — saydam arka planlı ve yuvarlatılmış SVG simgeli bir eleman, simge şekli boyunca iz bırakan bir drop-shadow alır. Ancak drop-shadow'da yayılım yarıçapı, inset ya daochrome desteği yoktur ve uzun listelerde daha kötü performans gösterir.

• Devasa rastgele bulanıklık: bulanıklığı eleman boyutuyla orantılı tutun; 4px–16px çoğu UI kartı için yeterlidir.
• Tek katmanlı düzlük: en az iki gölge üst üste koyun — sıkı bir temas katmanı ve geniş bir ortam katmanı.
• Çok büyük ofset: 8–10px'i aşan ofsetler elemanı kopuk gösterir; gerçekçi yükseltme için küçük tutun.
• Inset'i unutmak: basılmış butonlar ve input alanları genellikle inset gölge ister, dış gölge değil.

Erişilebilirlik: gölgeli metin ve kontrast

Bir kapsayıcı üzerindeki box-shadow genellikle erişilebilirlik açısından güvenlidir — metin kontrast oranlarını etkilemez. Ancak benzer çalışan text-shadow aşırı kullanıldığında okunabilirliği düşürebilir. WCAG 2.1 text-shadow'ı doğrudan düzenlemez, ancak metin ile bitişik arka plan arasında yeterli kontrast gerekliliği hâlâ geçerlidir. Arka plan rengiyle aynı renkte bir text-shadow, harf formlarını bulanıklaştıran bir halo efekti yaratır.

Pratik kural: text-shadow bulanıklığını küçük tutun (1px–2px), düşük opaklık kullanın (%30'un altında) ve metni yoğun bir arka plandan ayırmak için gölgeye asla tek başına güvenmeyin. Arka plan bir görsel ya da gradyansa gölge süslemedir — metin rengi ile arka planın en karanlık/açık alt tonu arasında hâlâ yeterli kontrast olmalıdır. Şüpheniz varsa, elemanı arka plan gölgenin arkasında görünür biçimde bir kontrast kontrolcüye sokun.

Performans: box-shadow versus filtre versus görseller

Box-shadow, tarayıcının eleman katmanını boyarken rasterize ettiği bir CSS özelliğidir. Modern donanımda birkaç box-shadow'ın maliyeti ihmal edilebilirdir. Performans endişesi iki senaryoda ortaya çıkar: düzinelerce gölgeli eleman içeren uzun kaydırılabilir listeler ve animasyon sırasında sık boyama tetikleyen çok sayıda çocuğu olan gölgeli elemanlar.

Genel kılavuz: UI bileşenleri için box-shadow kullanın, şeffaf arka planlı görseller veya simgeler için alpha izli gölge gerektiğinde filter: drop-shadow() kullanın ve gerçekten karmaşık ve statik olan görseller dışında önceden renderlanmış gölge görsellerinden kaçının. Box-shadow'ı animasyonlamak mümkündür ancak her karede boyama tetikler; 60fps akıcı animasyon için transform: translateZ(0) veya will-change: transform ile elemanı kendi bileşen katmanına yükseltmeyi veya gölgeyi bağımsız olarak yükseltilebilir bir pseudo-element'e koymayı düşünün.

Convrs'teki box-shadow üreticisi

Convrs, box-shadow üreticisi ile gölge oluşturmayı tahmin oyunundan çıkarır. Offset-x, offset-y, bulanıklık, yayılımı ve rengi kaydırıcılarla ayarlayın, farklı arka plan renklerinde sonucun canlı önizlemesini görün. Katman ekleyip sıralayarak gerçekçi derinlik oluşturun. Her değişiklik CSS çıktısını anında günceller — doğrudan stil sayfanıza kopyalayın. Araç tamamen tarayıcınızda çalışır; gölge değerleri ya da önizlemeler hiçbir sunucuya gönderilmez.