Box Shadow Oluşturucu
Konum, bulanıklık, yayılma, renk ve iç gölge ayarlarıyla CSS box-shadow değerleri oluşturun.
Doğal görünen gölgeler
Kartlar, butonlar, açılır menüler ve modallar gibi arayüz öğelerine derinlik katmak için box-shadow kullanılır. Ancak doğru değerleri tahmin ederek yazmak zordur. Box Shadow Oluşturucu ile ayarları kaydırıcılarla değiştirip sonucu anında görürsünüz.
Ayarlar
- Yatay ve dikey kaydırma (offset)
- Bulanıklık (blur) ve yayılma (spread)
- Gölge rengi ve opaklık
- İç gölge (inset)
Tasarım ipuçları
Yumuşak ve modern gölgeler için düşük opaklık (%10–20), büyük bulanıklık ve hafif dikey kaydırma kullanın. Koyu temada gölgeler daha az görünür; bu durumda kenarlık veya açık renk vurgular da düşünülebilir.
Box Shadow Oluşturucu nasıl kullanılır?
- Kaydırma, bulanıklık ve yayılma değerlerini ayarlayın.
- Gölge rengini ve opaklığı seçin.
- Gerekirse iç gölgeyi açın.
- Oluşan box-shadow kodunu kopyalayın.
Neden bu aracı kullanmalısınız?
Deneme yanılmayla vakit kaybetmeden profesyonel görünümlü gölgeler oluşturursunuz.
Sıkça sorulan sorular
Spread ne işe yarar?
Spread gölgeyi bulanıklaştırılmadan önce büyütür (pozitif) veya küçültür (negatif).
Birden fazla gölge kullanabilir miyim?
CSS'te gölgeleri virgülle ayırarak katmanlayabilirsiniz; oluşturduğunuz kodları birleştirerek daha gerçekçi gölgeler elde edebilirsiniz.
box-shadow performansı etkiler mi?
Büyük bulanıklıklı çok sayıda gölge, özellikle animasyonlarda performansı etkileyebilir; ölçülü kullanın.
İlgili araçlar
Border Radius Oluşturucu
Yuvarlatılmış köşeleri görsel olarak tasarlayın; dört köşeyi birlikte veya ayrı ayrı ayarlayın.
Aracı açCSS Gradyan Oluşturucu
Birden çok renk duraklı doğrusal ve dairesel CSS gradyanları canlı önizlemeyle tasarlayın.
Aracı açRenk Kodu Dönüştürücü
Renkleri HEX, RGB ve HSL arasında canlı önizlemeyle dönüştürün; alfa kanalı desteklenir.
Aracı açCSS Küçültücü
Yorumları ve gereksiz boşlukları kaldırarak CSS dosyalarınızı küçültün.
Aracı aç