CSS Box Shadow (Gölge) Oluşturucu
Kaydırıcıları oynatarak ve sonucu bir kart üzerinde izleyerek box-shadow oluşturun. Daha yumuşak, gerçekçi gölgeler için altı katmana kadar üst üste ekleyin, basılmış etkiler için inset kullanın; yumuşak, yüzen, parlama veya neumorfizm gibi hazır ayarlarla başlayın. CSS'i tek tıkla kopyalayın.
Nasıl kullanılır
- Hazır ayar seçin ya da gölgenin ofsetini, bulanıklığını, yayılmasını, rengini ve opaklığını ayarlayın.
- + ile katman ekleyin ve düzenlemek için birini seçin; tasarımınıza uyması için arka planı, kutu rengini ve köşe yarıçapını değiştirin.
- CSS'i kopyalayın ve öğenin kuralına yapıştırın.
Sık sorulan sorular
Bulanıklık ve yayılma ne işe yarar?
Bulanıklık gölgenin kenarını yumuşatır; sıfır keskin kenar verir. Yayılma, bulanıklaştırmadan önce gölgeyi her yöne büyütür; negatif yayılma küçültür ve büyük bulanık bir gölgenin öğenin altında kalmasına yardımcı olur.
Neden birden çok gölge katmanı kullanılır?
Gerçek gölgeler nesneye yakınken daha koyudur, uzaklaştıkça solar. Küçük ve keskin bir gölgeyi daha büyük ve yumuşak bir gölgeyle birleştirmek bunu taklit eder ve tek gölgeden daha doğal görünür. Listedeki ilk katman en üste çizilir.
box-shadow sayfayı yavaşlatır mı?
Normal kullanımda hayır. Çok sayıda öğede çok büyük bulanıklık ya da gölgenin kendisini canlandırmak, yavaş telefonlarda performansa mal olabilir; canlandırmak için bunun yerine gölgeyi taşıyan bir sözde öğenin opaklığını değiştirin.
🏷️ Meta Etiket Oluşturucu
🖼️ Open Graph Oluşturucu
🔗 UTM Link Oluşturucu
🌈 CSS Gradyan Oluşturucu