CSS Box Shadow Oluşturucu
Cihazınızda çalışır. Hiçbir şey gönderilmez.Her şey tarayıcınızda çalışır - hiçbir yere bir şey gönderilmez.
Şununla başla
Katmanlar
Yatay kaydırma
Dikey kaydırma
Bulanıklık
Yayılma
Renk
Kod
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]Mevcut bir gölgeyi düzenle
Katmanlı, iç gölgeli ve yumuşak hazır ayarlı CSS gölgeleri tasarlayın, canlı görün, CSS ya da Tailwind sınıfı olarak kopyalayın. Mevcut gölgeyi yapıştırıp düzenleyin.
İstediğiniz kutu gölgesini sayı tahmin ederek değil, gözle oluşturun. Bir hazır ayarla başlayın - yumuşak, orta, sert retro, katmanlı yumuşak, havada, iç gölge, nöromorfik ya da parıltı - sonra her katmanın kaydırmasını, bulanıklığını, yayılmasını, rengini, opaklığını ve iç gölge ayarını ince ayarlayın; önizleme sürükledikçe güncellenir. Gölgeler sekiz katmana kadar olabilir; en doğal görünen gölgeler böyle yapılır. Sonucu CSS ya da Tailwind sınıfı olarak kopyalayın, bağlantıyla paylaşın veya stil dosyanızdaki bir box-shadow'u yapıştırıp üzerinde çalışmaya devam edin.
Sıkça sorulan sorular
Bulanıklık ve yayılma ne işe yarar?
Bulanıklık gölgenin kenarını yumuşatır: 0 keskin bir çizgidir, büyük değerler gölgeyi daha çok piksel boyunca soldurur. Yayılma gölgeyi bulanıklaştırılmadan önce büyütür (pozitif) ya da küçültür (negatif) - küçük negatif yayılma ve büyük bulanıklık, modern arayüzlerin çoğundaki yumuşak, içe çekilmiş gölgeyi verir.
Neden birden fazla katman?
Gerçek gölgeler nesneye yakınken koyu ve keskin, uzaklaştıkça açık ve yumuşaktır. Tek katman ikisini birden yapamaz; Katmanlı yumuşak hazır ayarındaki gibi kaydırması ve bulanıklığı ikiye katlanan birkaç katmanı üst üste koymak çok daha doğal görünür.
İç gölge (inset) nedir?
İç gölge kutunun dışına değil içine çizilir, böylece kutu içeri basılmış gibi görünür - giriş alanları, çukur alanlar ve basılı düğmeler için kullanışlıdır. Tek bir gölgede iç ve dış katmanları karıştırabilirsiniz.
box-shadow sayfayı yavaşlatır mı?
Birkaç gölge ucuzdur. Çok sayıda öğede çok büyük bulanıklıklar ya da box-shadow'un kendisini canlandırmak yavaş telefonlarda kare hızını düşürebilir; animasyon için gölgeyi zaten taşıyan bir sözde öğenin opaklığını değiştirin.