Ücretsiz CSS Box Shadow Oluşturucu

Sırasıyla: inset (isteğe bağlı), X ofseti, Y ofseti, bulanıklık yarıçapı, yayılma yarıçapı ve renk. Pozitif X gölgeyi sağa, pozitif Y aşağı kaydırır. 0 bulanıklık sert bir kenar verir. Bu araç dört uzunluğun hepsini her zaman px cinsinden, ardından rengi yazar.

Küçük bir Y ofseti, büyük bir bulanıklık ve düşük opaklık kullanın; yayılma 0'a yakın olsun. Burada iyi bir başlangıç Y 6 px, bulanıklık 24 px ve opaklık %12'dir; bu da 0px 6px 24px 0px #0000001f değerini verir. Daha fazla derinlik için ikinci, daha sıkı bir katman ekleyin.

Bulanıklık gölgenin kenarını yumuşatır; bulanıklık arttıkça gölge daha geniş bir alanda solar. Yayılma ise bulanıklıktan önce gölgeyi büyütür veya küçültür: pozitif yayılma gölgeyi kutudan büyük, negatif yayılma daha küçük yapar. Burada bulanıklık 0 ile 100 px, yayılma -50 ile 50 px arasındadır.

Gölge katmanı ekle düğmesine tıklayın. Her katman bir sekme ve kendi ayarlarını alır; kod bunları virgülle, her satıra bir tane gelecek şekilde birleştirir. CSS'te listedeki ilk gölge en üstte çizilir, yani Katman 1 diğerlerinin üzerinde yer alır.

Katmanı seçin ve İç gölge seçeneğini işaretleyin. Kod inset anahtar sözcüğünü ekler ve gölge kutunun dışına değil içine çizilir. inset ile pozitif yayılma iç gölgeyi kalınlaştırır. Tek bir kuralda iç ve dış katmanları karıştırabilirsiniz.

Karşıt ofsetlere sahip iki katman kullanın: biri koyu, örneğin X ve Y değeri 8 px olan %15 opaklıkta #000000, diğeri ise -8 px'te tam opaklıkta beyaz. Öğeye ve üst öğesine aynı yumuşak arka planı verin. Buradaki önizleme kartı beyaz kalır, bu yüzden sonucu kendi sayfanızda kontrol edin.

box-shadow, öğenin kutusunu ve yuvarlatılmış köşelerini takip eder; yayılma ve iç gölgeyi destekler. drop-shadow() filtresi ise şeffaf bir PNG veya SVG simgesi gibi görünen şekli takip eder, ancak yayılma ya da iç gölge sunmaz. Bu araç yalnızca box-shadow yazar.

Hayır. Gölge yer kaplamaz; diğer öğeleri itmez ve kutu boyutunu değiştirmez. overflow: hidden olan bir üst öğe gölgeyi kırpabilir, bu yüzden bulanıklık veya ofset büyükse öğenin çevresinde biraz boşluk bırakın.

Araç opaklığı renge iki onaltılık basamak olarak ekler, bu yüzden yalnızca #1e293b gibi 6 basamaklı hex kodlarıyla çalışır. #fff gibi kısa kodlar, renk adları ve rgba() geçersiz CSS'e dönüşür ve gölge kaybolur. 0'ın altında yazılan bir bulanıklık değeri ya da 100'ü aşan opaklık da aynı sonucu verir.

Doğrudan alamazsınız, çünkü çıktı düz CSS'tir. Tailwind'de değerleri rastgele bir gölge sınıfına yazın ve her boşluğu alt çizgiyle değiştirin, örneğin shadow-[0px_4px_12px_0px_#00000026]; ya da tam değeri temanıza özel bir gölge olarak ekleyin.

Evet. Ücretsizdir; hesap gerekmez, gölge veya katman sayısında sınır yoktur. Değerleriniz bu sekmede kalır ve kaydedilmez, bu yüzden sayfayı yenilemek varsayılan gölgeyi geri getirir. Canlı sitede Google Analytics, CSS'i kopyala tıklamalarını sayar; gölge değerlerini asla.