TR

CSS box shadow oluşturucu

Box shadow oluşturucu, CSS gölgelerini değerleri elle yazmadan hazırlar. Bir şablon seçin veya kaydırma, bulanıklık, spread, renk ve opaklığı kaydırıcılarla ayarlayın. Birden fazla gölgeyi üst üste koyun ve istediğinizi iç gölgeye (inset) çevirin. Önizleme anında güncellenir, hazır CSS tek tıkla kopyalanır. Kendi CSS’inizi aşağıya yapıştırıp düzenlemeye de devam edebilirsiniz.

Gölgeyi ayarlayın

Şablonlar

box-shadow:
  0 10px 25px -5px rgba(0, 0, 0, 0.25),
  0 8px 10px -6px rgba(0, 0, 0, 0.1);
Her satıra bir gölge, virgülle ayrılmış – örn. 0 4px 12px rgba(0, 0, 0, 0.12)
Girdileriniz yalnızca bu tarayıcıda saklanır.

Sonuç

CSS bildirimi
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
Gölge katmanları (ilki en üstte)
No.X kaydırma (px)Y kaydırma (px)Bulanıklık (px)Yayılma – spread (px)RenkTür
10 px10 px25 px-5 pxrgba(0, 0, 0, 0.25)dış
20 px8 px10 px-6 pxrgba(0, 0, 0, 0.1)dış
Gölgenin kutunun dışına taşma miktarı (yaklaşık)
üst 10 px · sağ 20 px · alt 30 px · sol 20 px

Nasıl hesaplanır?

box-shadow nasıl çalışır?

W3C spesifikasyonuna (CSS Backgrounds and Borders Level 3) göre bir gölge iki ila dört uzunluk, isteğe bağlı bir renk ve isteğe bağlı inset anahtar kelimesinden oluşur:

DeğerAnlamı
1. uzunlukSağa yatay kaydırma (negatif: sola)
2. uzunlukAşağı dikey kaydırma (negatif: yukarı)
3. uzunlukBulanıklık yarıçapı, asla negatif değil; yazılmazsa 0
4. uzunlukSpread: gölgeyi büyütür, negatif değer küçültür
Renkyazılmazsa metin rengi kullanılır (currentColor)
insetgölgeyi kutunun dışına değil içine çizer

Birden fazla gölgeyi virgülle ayırın. İlk gölge en üstte çizilir, diğerleri onun arkasında. Gölgeler yerleşimi etkilemez ve kaydırma çubuğu oluşturmaz – ancak overflow: hidden olan bir üst öğe onları keser.

Bulanıklık ne kadar uzağa uzanır?

Spesifikasyon, standart sapması bulanıklık yarıçapının yarısı olan bir Gauss bulanıklığına yaklaşan bir bulanıklık ister. Oluşan geçiş, bulanıklık değerinin yaklaşık iki katı genişliktedir ve gölge kenarında ortalanır – yani dışa doğru kabaca bir bulanıklık yarıçapı kadar uzanır.

Örnek 0 10px 25px -5px: kenar kutunun 25 − 5 = 20 px dışındadır ve 10 px aşağı kaymıştır. Gölge böylece üstte yaklaşık 20 − 10 = 10 px, yanlarda 20 px, altta 20 + 10 = 30 px taşar. Oluşturucu bu değerleri “Gölgenin taşma miktarı” altında gösterir – hiçbir şey kesilmesin diye padding olarak kullanışlıdır.

Yaygın kullanımlar

Sıkça sorulan sorular

Blur ile spread arasındaki fark nedir?

Blur (3. değer) gölgenin temel alanını değiştirmeden kenarı yumuşatır. Spread (4. değer) bulanıklaştırmadan önce gölge alanının kendisini büyütür veya küçültür. Blur 0 ve pozitif spread sert bir çerçeve verir.

Birden fazla gölge nasıl üst üste konur?

Virgülle ayırın, örn. 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24). İlk gölge en üstte çizilir. Oluşturucuda yeni katmanları “+ Gölge” ile eklersiniz.

Gölgem neden kesiliyor?

Gölgeler öğenin boyutuna dahil değildir. Üst öğede overflow: hidden veya overflow: auto varsa taşan kısım kesilir. Üst öğeye, oluşturucunun gölge taşması olarak gösterdiği kadar padding verin.

box-shadow her tarayıcıda çalışır mı?

Evet. Çoklu gölge, inset ve rgba() renkler dahil box-shadow, güncel tüm tarayıcılarda öneksiz desteklenir. Oluşturucu saydam renkleri eski tarayıcıların da anladığı rgba() olarak yazar.

Kaynaklar ve yasal dayanak

Güncelleme:

Benzer araçlar