CSS Gölge (box-shadow) Üretici
box-shadow kuralını kaydırıcılarla kurun, canlı önizlemede görün ve hazır kuralı kopyalayın.
box-shadow'un dört sayısı (yatay, dikey, bulanıklık, yayılma) akılda kalmıyor ve sırası yanlış yazıldığında gölge beklenmedik yere düşüyor. Bu araç her değeri ayrı kaydırıcıyla verir, sonucu anında önizlemede gösterir. Önizleme zemini bilerek açık renk: gölgeler açık zeminde değerlendirilir ve koyu temada bakıp "güzel olmuş" demek yanıltıcıdır. Üretilen kural doğrudan kopyalanıp CSS dosyanıza yapıştırılabilir.
Nasıl kullanılır
- Kaydırıcıları ayarlayın Yatay ve dikey kayma gölgenin yönünü, bulanıklık yumuşaklığını belirler.
- Rengi ve koyuluğu seçin Koyuluk değeri gölgenin saydamlığıdır; yüzde 20 civarı çoğu arayüzde yeter.
- Kuralı kopyalayın Alttaki satır tam CSS kuralıdır, olduğu gibi yapıştırabilirsiniz.
Sık sorulan sorular
- Yayılma (spread) negatif olabilir mi?
- Evet, gölgeyi küçültür. Negatif yayılma ile yüksek bulanıklık birleşimi, kenarlardan taşmayan yumuşak bir gölge verir; kart tasarımlarında sık kullanılır.
- inset ne yapıyor?
- Gölgeyi ögenin dışına değil içine çizer. Girintili alanlar ve basılı düğme görünümü için kullanılır.
- Birden çok gölgeyi nasıl birleştiririm?
- box-shadow virgülle ayrılmış birden çok gölge kabul eder. Bu araçla tek tek üretip aralarına virgül koyarak birleştirebilirsiniz; ilk yazılan en üstte durur.
İlgili araçlar
Renk Dönüştürücü
HEX, RGB ve HSL arasında çevirin; kontrast oranını WCAG ölçütlerine göre görün.
CSS Birim Dönüştürücü
px, rem, em, pt ve vw birimleri arasında çevirin; kök yazı boyutunu kendiniz belirleyin.
JSON Biçimlendirici
Tek satıra sıkışmış JSON'u okunur hâle getirin, hatalı yeri satır numarasıyla görün.