CSS Kutu Gölgesi Oluşturucu: Canlı Önizleme, Kodu Kopyala
Kayma, bulanıklık, yayılma, renk ve opaklığı ayarlayarak CSS box-shadow değeri oluşturun, canlı önizleyin ve kodu kopyalayın.
CSS Kutu Gölgesi Oluşturucu
Bu araç, altı kontrolden tek bir CSS box-shadow değeri oluşturur: yatay kayma, dikey kayma, bulanıklık yarıçapı, yayılma yarıçapı, kendi opaklık kaydırıcısına sahip bir gölge rengi ve bir inset (iç gölge) anahtarı. İki ayrı renk seçici önizleme kutusunu ve arka planını değiştirir, böylece gölge açık veya koyu bir zeminde doğru görünür; soft, hard, glow ve inset adlı dört hazır ayar ise tek tıkla hazır bir kombinasyon yükler. Her değişiklik, önizlemenin altındaki box-shadow satırını anında günceller ve oluşan kod, kopyala düğmesiyle tek tıkla panoya alınabilir.
Box-Shadow Değeri Nasıl Oluşturulur
CSS bir gölgeyi sabit bir sırayla yazar: yatay kayma, dikey kayma, bulanıklık yarıçapı, yayılma yarıçapı, ardından bir renk; gölgeyi kutunun arkasında değil içinde çizmek için başına inset kelimesi eklenir. Yatay ve dikey kayma gölgeyi yana veya dikeyde kaydırır ve her ikisi de -50px'e kadar negatif değer kabul eder, böylece gölge kutunun soluna düşebilir veya üstünde durabilir. Bulanıklık yarıçapı 0 ile 100px arasında gölgenin kenarını yumuşatır, yayılma yarıçapı ise -50 ile 50px arasında gölgeyi kutunun kendi boyutundan bağımsız olarak büyütür veya küçültür. Renk seçicideki hex değeri kırmızı, yeşil ve mavi bileşenlerine ayrılır; 0 ile 1 arasındaki opaklık kaydırıcısı ise rgba() içindeki dördüncü değer olur; bu sayı 0 olduğunda gölge tamamen saydam kalır, 1 olduğunda ise seçilen renkle birebir aynı görünür.
Örnek Hesaplama
Yatay kaymayı -8px, dikey kaymayı 12px, bulanıklığı 24px ve yayılmayı -4px olarak ayarlayıp gölge rengini #7c3aed, opaklığı da 0,4 yapmak şu çıktıyı verir: box-shadow: -8px 12px 24px -4px rgba(124, 58, 237, 0.4). #7c3aed hex kodu kırmızı 124, yeşil 58 ve mavi 237 değerlerine ayrılır, kaydırıcıdaki 0,4 değeri ise herhangi bir dönüşüme gerek kalmadan rgba() içindeki dördüncü sayı olur. Aynı altı değerle inset açıldığında gölge, kutunun arkasında değil kenarının içinde çizilir; bu, basılı düğme veya içbükey giriş alanı efektlerinde sık kullanılır.
Kopyalanabilir CSS Çıktısı
.kart {
box-shadow: -8px 12px 24px -4px rgba(124, 58, 237, 0.4);
}