Kutu Gölgesi Oluşturucu
Box Shadow Generator; X ve Y ofseti, bulanıklık, yayılma, renk, opaklık ve inset kaydırıcılarıyla, Material Design ve Tailwind hazır ayarlarıyla bir CSS box-shadow oluşturur ve tam CSS'i verir.
Bu araç hakkında
Box Shadow Generator; X ve Y ofseti, bulanıklık, yayılma, renk, opaklık ve inset kaydırıcılarıyla, Material Design ve Tailwind hazır ayarlarıyla bir CSS box-shadow oluşturur ve tam CSS'i verir.
Nasıl kullanılır
- Bir hazır ayardan başlayın veya Custom'da kalın.
- X/Y ofsetini, bulanıklığı, yayılmayı ve opaklığı ayarlayın.
- Gölge rengini seçin ve iç gölge için Inset'i işaretleyin.
- box-shadow kuralını yapıştırmak için Copy CSS'e tıklayın.
Bilmekte fayda var
- box-shadow söz dizimi: [inset] offset-x offset-y blur-radius spread-radius color.
- Daha büyük bir blur yarıçapı kenarı yumuşatır; spread ise gölgeyi bulanıklaştırmadan önce büyütür veya küçültür.
- Düşük opaklıklı koyu gölgeler (yaklaşık %10–25) düz siyahtan daha doğal görünür.
- Birden fazla gölge virgülle ayrılarak katmanlanabilir.
- inset anahtar kelimesi gölgeyi öğenin kenarlığının içine çizer.
Tamamen tarayıcınızda çalışır — girdiğiniz hiçbir şey yüklenmez veya saklanmaz.
Sık sorulan sorular
CSS'te bir div'e nasıl gölge eklerim?
box-shadow özelliğini kullanın; örneğin box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2); bu araç değeri sizin için yazar.
Blur ile spread arasındaki fark nedir?
Blur gölge kenarının ne kadar yumuşak olduğunu kontrol eder. Spread ise bulanıklık uygulanmadan önce gölgenin boyutunu genişletir veya daraltır.
İç gölge nasıl yapılır?
Değerin başına inset anahtar kelimesini ekleyin veya araçta Inset'i işaretleyin.
Birden fazla box shadow kullanabilir miyim?
Evet. Gölgeleri virgülle ayırın; Material ve Tailwind hazır ayarlarındaki gibi katmanlı gölgeler daha gerçekçi görünür.