DevToolPal
TR

CSS Box Shadow Oluşturucu

CSS gölgelerini görsel olarak tasarlayın: birden çok katmanı üst üste koyun, kaydırma, bulanıklık, yayılma, renk ve inset ayarlayın; canlı önizleme, hazır ayarlar ve kopyalanmaya hazır CSS.

Yerelde çalışır, asla yüklenmez

Gölge katmanları

Gölge yok. Bir katman ekleyin ya da hazır ayar seçin.

Önizleme

Kutu rengi
Arka plan

CSS

Hazır ayarlar
Box shadow CSS
 
 
 
 
 
Ne yapar


Box shadow oluşturucu, CSS gölgelerini gözle tasarlayıp hazır box-shadow bildirimini kopyalamanızı sağlar. İhtiyacınız kadar katman ekleyin, her birinin kaydırmasını, bulanıklığını, yayılmasını, rengini ve opaklığını ayarlayın, iç gölgeye çevirin; önizleme anında güncellenir. Mevcut bir box-shadow değerini yapıştırıp görsel olarak da düzenleyebilirsiniz. Her şey tarayıcınızda çalışır.


Nasıl kullanılır


    

  1. Bir hazır ayardan başlayın ya da örnek gölgeyi koruyun.
    2. 

  2. Katman düğmeleriyle bir katman seçin veya üstüne bir tane daha eklemek için + Katman ekle’ye tıklayın.
    3. 

  3. Yatay kaydırma, Dikey kaydırma, Bulanıklık ve Yayılma’yı sürükleyin, bir Renk seçin ve daha yumuşak bir görünüm için Opaklık’ı azaltın. İçe doğru gölge için İç gölge’yi açın.
    4. 

  4. Önizlemenin Kutu rengi, Arka plan ve Köşe yarıçapı ayarlarını sayfanıza uydurun. Bunlar yalnızca önizlemeyi etkiler.
    5. 

  5. Kodu CSS kartından kopyalayın.
    6. 



Alttaki Box shadow CSS kutusu düzenlenebilir: stil sayfanızdan veya tasarım aracınızdan bir gölge yapıştırın, kontroller onu okur. rem veya em uzunlukları 16px üzerinden px’e çevrilir.


Örnek


.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}


Doğal gölgeler için ipuçları


    

  • Düşük opaklık kullanın. %5–25 siyah gerçekçi görünür; dolu koyu gölgeler ağır durur.
    • 

  • Negatif yayılma, büyük bir bulanıklığın yanlardan taşmasını engeller; çoğu “kart” gölgesinin sırrı budur.
    • 

  • Gölgeyi renklendirin. Arka planın veya markanın tonundan biraz içeren gölge, saf griden daha zengin görünür.
    • 

  • Işık tek yönden. Tüm katmanlarda dikey kaydırmayı pozitif tutun ki gölgeler ışığın geldiği yön konusunda uyuşsun.
    • 

  • Performans. Çok sayıda öğede büyük bulanıklıklar düşük donanımlı telefonlarda kaydırmayı yavaşlatabilir; gölgenin kendisi yerine opacity veya transform’u canlandırın.
    • 

 
  
 
SSS
 
 
  › box-shadow'daki dört sayı ne anlama gelir?  
Sırasıyla: yatay kaydırma, dikey kaydırma, bulanıklık yarıçapı ve yayılma yarıçapı. Pozitif kaydırmalar gölgeyi sağa ve aşağı taşır. Bulanıklık kenarı yumuşatır ve negatif olamaz. Yayılma, bulanıklık uygulanmadan önce gölgeyi büyütür (pozitif) veya küçültür (negatif).
 
  › Neden birden çok gölge katmanı kullanılır?  
Gerçek gölgeler nesneye yakınken nettir, uzaklaştıkça solar. Küçük ve net bir gölgeyle büyük ve yumuşak bir gölge gibi iki veya daha fazla katmanı üst üste koymak, tek bir koyu bulanıklıktan çok daha doğal görünür. Çoğu tasarım sistemi yükseklik seviyelerini böyle kurar.
 
  › inset ne işe yarar?  
inset gölgeyi kutunun dışına değil içine çizer; öğe içeri basılmış gibi görünür. Giriş alanlarında, basılı düğmelerde ve iç parıltılarda kullanılır. Tek bir box-shadow içinde iç ve dış katmanları karıştırabilirsiniz.
 
  › box-shadow border-radius'u izler mi?  
Evet. Gölge, yuvarlatılmış köşeler dahil öğenin şeklini alır; bu yüzden önizleme ayarladığınız köşe yarıçapını kullanır. Bir görüntünün saydam kısımlarını izlemez; bunun için CSS filtresi drop-shadow() kullanın.