CSS box-shadow sözdizimi nasıldır?

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color; şeklindedir. offset-x ve offset-y zorunludur; diğerleri isteğe bağlıdır. Birden fazla gölge virgülle ayrılarak birleştirilebilir: box-shadow: 2px 4px 8px rgba(0,0,0,.2), -2px -2px 4px rgba(255,255,255,.1);

inset gölge ne işe yarar?

inset anahtar kelimesi gölgeyi elemanın dışından içine taşır. Dışa vuran gölge yerine elemanın içini çöküş etkisiyle (pressed/depressed effect) göstermek için kullanılır. Kart baskı animasyonları, aktif buton durumları ve neumorphism tasarımlarında sıkça tercih edilir.

Spread (yayılma) değeri negatif olabilir mi?

Evet. Negatif spread, gölgeyi tüm yönlerde eleman sınırının içine doğru büzer. Bu, blur olan ancak kutu sınırlarının dışına taşmayan, rafine bir derinlik efekti elde etmek için kullanılan yaygın bir tekniktir. Örneğin box-shadow: 0 10px 15px -3px rgba(0,0,0,.1) alttan dökme bir gölge oluşturur.

Birden fazla gölge katmanı performansı etkiler mi?

Box-shadow GPU tarafından compositor layer'da çizilir; 2-3 katman pratikte performans sorunu yaratmaz. Ancak çok sayıda büyük, yüksek blur değerli gölgenin büyük elementlerde üst üste kullanımı (özellikle animasyon sırasında) bazı cihazlarda frame drop'a yol açabilir. Animasyon gerekiyorsa filter: drop-shadow() yerine transform + opacity kombinasyonu genellikle daha verimlidir.

Tasarım Aracı

CSS Box Shadow Generator

Çoklu katmanlı CSS gölgeler oluşturun, anında önizleyin ve kodu kopyalayın.

—

Arka Plan Rengi

Kutu Rengi

CSS box-shadow Sözdizimi

box-shadow: [inset] offset-x offset-y blur spread color;
/* Çoklu gölge — virgülle ayrılır */
box-shadow: 0 2px 8px -2px rgba(0,0,0,.2),
            0 0 0 1px rgba(0,0,0,.05);

Parametreler Ne Anlama Gelir?

offset-x / offset-y: Gölgenin yatay ve dikey kayması. Negatif değer solda ve üstte gölge oluşturur.
blur: Gölge kenarlarının yumuşaklığı. 0 = keskin, yüksek değer = daha yayılan gölge.
spread: Gölgeyi tüm yönlerde büyütür veya küçültür. Negatif değer gölgeyi büzer.
inset: Dış gölge yerine iç gölge oluşturur; elemanın içini çökmüş gösterir.

Tasarım Şablonları

Birkaç yaygın kullanım örneği:

Minimal kart: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06)
Belirgin kart: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1)
Alttan döküm: 0 10px 15px -3px rgba(0,0,0,.15)
Neumorphism (açık): 6px 6px 12px #c8c8c8, -6px -6px 12px #ffffff

Sık Sorulan Sorular

box-shadow yerine filter: drop-shadow() ne zaman kullanılır?

box-shadow elemanın sınır kutusuna (border-box) gölge uygular; şeffaf alanları ve delikli şekilleri dikkate almaz. filter: drop-shadow() ise elemanın gerçek piksel dışına gölge atar; PNG'deki şeffaf bölgeler dişli kaldığında veya SVG ikonlara gölge eklemek istediğinizde daha doğal sonuç verir. Performans açısından box-shadow compositor'de çizilir, drop-shadow ise boyama aşamasına girer — animasyon için box-shadow tercih edilir.

Gölgede rgba renk mi hex renk mi kullanmalıyım?

Şeffaflık istiyorsanız rgba veya hsla zorunludur; 6 basamaklı hex opak renk verir. Modern CSS'de #00000033 gibi 8 basamaklı hex de şeffaflık desteği sunar (son iki basamak alfa, FF=opak, 33=yaklaşık %20). Tema değişkenlerinde currentColor kullanmak, karanlık mod geçişlerinde gölgenin otomatik uyum sağlamasını kolaylaştırır.

İlgili araçlar: Border Radius · Glassmorphism · Neumorphism