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.
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.
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.
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.