CSS box-shadow generator
Craft box-shadow values visually. Set horizontal and vertical offset in pixels, blur radius (soft edge), spread (grow or shrink the shadow before blur), color, opacity, and optional inset for inner shadows. The preview box updates live; copy the full box-shadow declaration into your CSS. Understand how each parameter changes elevation and depth without trial-and-error in devtools.
X (px)
Y (px)
Bulanıklık (px)
Yayılma (px)
Renk
Opaklık (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
How to build a box shadow
1. Set X and Y offset — positive X moves shadow right, positive Y moves it down.
2. Adjust blur (softness) and spread (size before blur).
3. Pick shadow color and opacity.
4. Toggle inset if the shadow should appear inside the box; copy CSS.
Gölge tarifleri
Yumuşak kart yükseltmesi
offsetY 8 piksel, bulanıklık 24 piksel, yayılma 0, %18 opaklıkta siyah — Malzeme tarzı kayan kart: box-shadow: 0 8 piksel 24 piksel rgba(20,20,20,0.18).
Keskin gölge
bulanıklık 0, yayılma 0, ofsetY 4px — sayfadan hafifçe kaldırılmış çıkartmaya benzer sert kenar.
Ek basılan düğme
Küçük bulanıklıkla iç metni etkinleştir — öğenin içindeki basılı veya girintili kontrolü simüle eder.
Ne zaman kullanılmalı
• Kartlar, modeller ve düğmeler için kullanıcı arayüzü derinliğini ayarladığınızda.
• Bulanıklığın yayılmadan ne kadar farklı olduğunu öğrendiğinizde.
• Tasarım belirteçlerini tam gölge değerleriyle belgelediğinizde.
Ne zaman başka bir şey seçmeli
• Birden fazla yığılmış gölgeye ihtiyacınız olduğunda — ilk katmanı buraya kopyalayın, ardından CSS'a daha fazlasını ekleyin.
• Text-shadow istediğinizde — benzer sözdizimine sahip farklı özellikler.
• Düzensiz PNG şekillerde alt gölgeye ihtiyacınız olduğunda filtre: drop-shadow() daha iyi çalışabilir.
Dört sayıyı okumak
kutu gölgesi: 0 8px 24px 0, x=0, y=8px aşağı, bulanıklık=24px, spread=0 anlamına gelir. Yayılmayı atlayın ve tarayıcıların varsayılan yayılımı 0'dır. Sıfır ofsetle büyük bulanıklık bir parlaklık yaratır; küçük bulanıklığa sahip büyük ofset, yönlü ışık oluşturur.
Gölgeleri katmanlama
Birden çok gölgeyi virgülle ayırın: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15); İlk gölge sonraki gölgelerin altına boyanır. Gerçekçi derinlik için sıkı koyu bir gölgeyi geniş açık bir gölgeyle birleştirin.
Erişilebilirlik ve performans
Geniş animasyonlu alanlardaki ağır gölgeler GPU'nun boyama süresine mal olabilir. Veri yoğun kullanıcı arayüzleri için ince gölgeleri tercih edin. Odaklanılan öğelerin görünür kalmasını sağlayın; durumu göstermek için yalnızca gölgeye güvenmeyin; Klavye kullanıcıları için kenarlık veya taslakla eşleştirin.
Sık sorulan sorular
Kutu gölge sözdizimi nedir?
kutu gölgesi: ofset-x ofset-y bulanıklık-yarıçap yayılma yarıçapı rengi; İsteğe bağlı iç metin anahtar sözcüğü bir iç gölge oluşturur.
Bulanıklaştırma mı, yayılma mı?
Bulanıklaştırma, gölge kenarını yumuşatır. Yayılma, bulanıklaşmadan önce gölge şeklini genişletir veya daraltır; pozitif yayılma genişler, negatif ise küçülür.
Hangi birimleri kullanmalıyım?
Bu araç, ekran kullanıcı arayüzü gölgeleri için en yaygın seçim olan piksel (px) çıktısını verir.
İç metin ne işe yarar?
İç metin, gölgeyi öğe kenarlık kutusunun içine çizer; batık girişler veya kuyucuklar için kullanışlıdır.
Gölge rengi yarı saydam olabilir mi?
Evet. Seçilen renge opaklık uygulanarak çeşitli arka planlar üzerinde pürüzsüz kenarlar için RGBa çıkışı üretilir.
Değerler bir sunucuya gönderiliyor mu?
Hayır. Önizleme ve CSS yereldir.
Bu bedava mı?
Evet, hesaba gerek yok.