CSS Box-Shadow Generator

Canlı önizleme ile tek ve çoklu CSS gölgelerini görsel olarak oluşturun.

px
px
px 
{{ cssOutput }}

CSS box-shadow nedir?

CSS özelliği box-shadow, bir öğeye bir veya daha fazla gölge ekler. Gölgeler derinlik oluşturur ve kartlar, düğmeler ve diyaloglar gibi öğeleri arka plandan öne çıkarır.

box-shadow sözdizimi

Sözdizimi: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;. Offset-X ve Offset-Y gölgenin konumunu belirler. Bulanıklık yarıçapı yumuşaklığı, yayılma yarıçapı gölgenin boyutunu kontrol eder.

Harika gölgeler için ipuçları

  • Daha gerçekçi sonuçlar için farklı bulanıklık değerleriyle birden fazla gölge kullanın.
  • Gölge renklerini hafif tutun — sert renkler yerine saydam siyah tonları kullanın.
  • Inset gölgeler, basılı düğmeler ve giriş alanları için harika çalışır.
  • Gölgeleri hem açık hem de koyu modda test edin, çünkü farklı görünebilirler.