Nasıl kullanılır?
- İlk katmanın Yatay kayma ve Dikey kayma değerlerini girin. Pozitif dikey kayma gölgeyi aşağı taşır.
- Kenarı yumuşatmak için Bulanıklık değerini, gölgeyi kutudan büyük ya da küçük yapmak için Yayılma değerini artırın.
- Bir Renk ve bir Saydamlık seçin. Daha doğal bir gölge için Katman ekle ile yeni katmanlar ekleyin.
- CSS tanımını kopyalayıp öğenizin kuralına yapıştırın.
Değer nasıl oluşur?
box-shadow özelliği virgülle ayrılmış bir ya da daha fazla gölge alır. Her gölge, isteğe bağlı inset anahtar sözcüğü, yatay ve dikey kayma, bulanıklık yarıçapı, yayılma mesafesi ve bir renkle yazılır. İlk gölge diğerlerinin üstüne çizilir; hiç gölge yoksa değer none olur.
Bulanıklık yarıçapı hiçbir zaman negatif olmaz. Daha büyük bulanıklık gölgeyi daha geniş bir alana yumuşakça yayar; yayılma ise bulanıklık uygulanmadan önce gölgeyi büyütür ya da küçültür. Saydamlık, bir rgba renginin alfa değeri olarak en fazla iki ondalıkla yazılır.
box-shadow: [inset] kayma-x kayma-y bulanıklık yayılma renk, ...Katmanlar ve düzenleyicinin denetledikleri
Yumuşak ve doğal bir gölge çoğu zaman iki katmandan oluşur: kutuya yakın, küçük ve koyu bir gölge ile daha dışarıda, daha geniş ve açık bir gölge. Her katman değerdeki bir gölgedir. Düzenleyici en çok 8 katman, -200 ile 200 piksel arasında kayma ve yayılma, 0 ile 200 piksel arasında bulanıklık ve yüzde 0 ile 100 arasında saydamlık kabul eder.
Önizleme, koddakiyle aynı değeri kullanır; gördüğünüz, tarayıcının çizdiğidir. Çok büyük bulanıklık ve yayılma eski telefonlarda daha yavaş çizilir; bu yüzden işi gören en küçük değerleri kullanın.
Örnek: iki katmanlı bir kart
İlk katman, 0 ve 4 piksel kayma, 6 bulanıklık ve yayılma olmadan, yüzde 10 saydamlıkta siyah bir gölgedir. İkincisi 0 ve 10 piksel kayma, 20 bulanıklık ve yüzde 15 saydamlıktadır. Değer 0px 4px 6px 0px rgba(0, 0, 0, 0.1), 0px 10px 20px 0px rgba(0, 0, 0, 0.15) olur.
Bir karta uygulandığında kartın altında keskin, aşağıda daha yumuşak bir gölge oluşur.
Sık sorulan sorular
inset ne yapar?
İç gölge kutunun içinde, kenarları boyunca çizilir; sanki kutu içe basılmış gibi görünür. Giriş alanları ve basılmış bir düğme için kullanışlıdır. Bir kutuda iç ve dış gölge birlikte bulunabilir.
Kaymaların neden işareti var?
Pozitif yatay kayma gölgeyi sağa, negatif olan sola taşır. Pozitif dikey kayma gölgeyi aşağı taşır; bu yüzden bir kutunun altına düşen gölgenin değeri pozitiftir.
Bulanıklık ile yayılma arasındaki fark nedir?
Bulanıklık gölgenin kenarını yumuşatır ve gölgenin daha geniş bir alanda solmasını sağlar. Yayılma ise bulanıklık uygulanmadan önce gölgenin kendisini büyütür; negatifse küçültür. Bulanıklık sıfırın altına inemez, yayılma inebilir.
Üretilen CSS tüm tarayıcılarla uyumlu mu?
Önek olmadan kullanılan box-shadow özelliği, birden çok katman ve rgba renkleriyle birlikte, güncel tüm tarayıcılarda yıllardır desteklenir. Tanım olduğu gibi, satıcı öneki olmadan kullanılabilir.
Düzenleyici bir şey kaydediyor ya da gönderiyor mu?
Hayır. Gölge tarayıcınızda çizilir; hiçbir şey saklanmaz ya da sunucumuza gönderilmez. Sayfadan ayrılmadan önce CSS'i kopyalayın, çünkü yenileme varsayılan gölgeden başlatır.
Kaynaklar
Rakamlar ve metin en son 10 Kasım 2026 Salı tarihinde kontrol edildi.