CSS Kutu Gölgesi (Box Shadow) Oluşturucu
X/Y ofset, bulanıklık (blur), yayılma (spread) ve renk ayarlarıyla canlı box-shadow tasarlayın ve CSS kodunu kopyalayın.
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.15);CSS Box-Shadow Nedir?
CSS box-shadow özelliği HTML elementlerine derinlik, modern kart efekti ve gölge kazandırır. X ve Y ofsetleri gölgenin yönünü, blur bulanıklığı, spread ise gölgenin genişleme mesafesini belirler.
CSS Kutu Gölgesi (Box-Shadow) Oluşturucu Rehberi
Web öğelerine modern derinlik ve gölge efektleri eklemek için yatay/dikey kayma, bulanıklık, yayılma ve renk parametreleriyle CSS box-shadow kodu üretme rehberi.
1Nasıl Kullanılır?
- 1.Yatay kayma (X-offset) ve dikey kayma (Y-offset) piksellerini ayarlayın.
- 2.Bulanıklık (Blur) ve yayılma (Spread) yarıçaplarını belirleyin.
- 3.Gölge rengini ve opaklığını (RGBA) seçin.
- 4.Dış gölge veya İç gölge (Inset) modunu seçerek CSS kodunu kopyalayın.
2Hesaplama Yöntemi ve Formüller
CSS box-shadow özelliği, kartlara, butonlara ve kutulara gerçekçi ışık ve derinlik hissi kazandırır. Neumorphism ve yumuşak modern gölge tasarımlarında kullanılır.
Çalışma Mantığı
Kutu gölgesi parametreleri standart CSS sözdizimi formatına dönüştürülür.
box-shadow: [inset] X-offset Y-offset Blur-Radius Spread-Radius Color;
3CSS Kutu Gölgesi (Box-Shadow) Oluşturucu Rehberi Örnek Senaryo
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
💡 Sonuç Değerlendirmesi: Hesaplama başarıyla tamamlanmıştır.
⚠️Dikkat Edilmesi Gereken Önemli Hususlar
- •Tek bir sert gölge yerine iki katmanlı düşük opaklıklı gölgeler kullanmak çok daha doğal ve profesyonel bir görünüm sağlar.
- •Koyu mod (Dark Mode) tasarımlarında siyah gölge yerine parlak ince kenarlıklar (border) veya çok hafif renkli gölgeler tercih edilmelidir.
Sıkça Sorulan Sorular (SSS)
Spread (yayılma) yarıçapı ne işe yarar?
Yayılma değeri pozitifse gölgeyi her yöne doğru genişletir, negatifse gölgeyi öğenin altına doğru daraltarak daha zarif bir derinlik verir.