Nasıl kullanılır
- Yatay kaydırma ve Dikey kaydırma değerlerini ayarlayarak gölgenin konumunu belirleyin.
- Bulanıklık ve Yayılma değerlerini ayarlayın; değişiklikleri canlı önizlemede izleyin.
- Renk alanından gölge rengini seçin, Opaklık değerini ayarlayın.
- Birden fazla gölge için + Katman ekle düğmesine basın ve yeni katmanın değerlerini ayarlayın.
- Oluşan kodu CSS'i kopyala düğmesiyle kopyalayın; yalnızca değer gerekiyorsa Değeri kopyala düğmesini kullanın.
Örnekler
Ürün kartı için yumuşak gölge
Yatay kaydırma: 0 · Dikey kaydırma: 8 · Bulanıklık: 24 · Yayılma: 0 · Renk: #2451E8 · Opaklık: 0.35 · İç gölge: kapalı
box-shadow: 0 8px 24px 0 rgba(36, 81, 232, 0.35);
Form alanı için iç gölge
Yatay kaydırma: 0 · Dikey kaydırma: 2 · Bulanıklık: 4 · Yayılma: 0 · Renk: #000000 · Opaklık: 0.15 · İç gölge: açık
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15);
Buton için keskin gölge
Yatay kaydırma: 6 · Dikey kaydırma: 6 · Bulanıklık: 0 · Yayılma: 0 · Renk: #222222 · Opaklık: 1 · İç gölge: kapalı
box-shadow: 6px 6px 0 0 rgba(34, 34, 34, 1);
İpuçları
- Gölge rengini HTML Renk Kodları ile seçin.
- CSS Gradient Oluşturucu ile gradyan arka planla birleştirin.
Sık sorulan sorular
Kutu rengi ve köşe yarıçapı neden CSS kodunda görünmüyor?
Kutu rengi, Arka plan ve Köşe yarıçapı yalnızca önizlemeyi değiştirir. Oluşturulan kod sadece box-shadow özelliğini içerir.
Değerleri değiştirdiğim halde gölge neden güncellenmiyor?
Geçersiz bir değer varsa kod ve önizleme son geçerli gölgeyi korur. Kaydırma ve yayılma için −200 ile 200, bulanıklık için 0 ile 300 arasında tam sayı girin; opaklık 0 ile 1 arasında olmalıdır.
Renk alanına şeffaflık içeren hex kodu yazabilir miyim?
Renk alanı yalnızca #RGB veya #RRGGBB biçimini kabul eder; # işareti isteğe bağlıdır. Şeffaflığı Opaklık ile ayarlayın; renk kodda rgba() biçiminde yazılır.
Birden fazla gölgede hangi katman üstte görünür?
İlk katman üstte çizilir ve CSS kodunda ilk sırada yer alır. Sıralamayı ↑ Yukarı taşı ve ↓ Aşağı taşı ile değiştirin; en fazla dört katman kullanabilirsiniz.
Gölge ayarlarım sonraki ziyarette kalır mı?
Katmanlar ve önizleme ayarları tarayıcınızın localStorage alanına kaydedilir ve sonraki ziyarette geri yüklenir. Sıfırla düğmesi bu kaydı siler ve varsayılan ayarlara döner.