🌑 Box Shadow
Box Shadow Generator
Visual ayar + kopyala CSS. Tasarım için çok hızlı.
⚙️ Ayarlar
0px
12px
32px
0px
25%
18px
✅ Çıktı
Preview
💡 İpucu
- Gölgeyi “az ama net” tutmak genelde daha modern durur
- Arka plan için: CSS Gradient Generator
🛠️ Box Shadow Generator Nasıl Kullanılır?
- Sürükleyicileri kullanarak gölgenin X ve Y eksenindeki konumunu belirleyin.
- Gölgenin yumuşaklığını ayarlamak için Blur değerini değiştirin.
- Gölgenin büyüklüğünü kontrol etmek için Spread ayarını kullanın.
- Renk seçiciden gölge rengini ve şeffaflığını (Opacity) ayarlayın.
- İhtiyacınıza göre 'Inset' seçeneğiyle iç gölge oluşturun ve CSS kodunu kopyalayın.
✨ Öne Çıkan Özellikler
- İnteraktif sürükleyicilerle gerçek zamanlı görsel geri bildirim.
- İç gölge (inset) ve dış gölge seçenekleri bir arada.
- Kutu köşeleri (radius) ile uyumlu önizleme desteği.
- RGBA formatında şeffaflık destekli CSS çıktı üretimi.
- Tasarımcılar için hızlı ve pratik kullanım deneyimi.
❓ Sıkça Sorulan Sorular
CSS Box Shadow nedir?
Bir HTML öğesinin çerçevesine gölge efekti eklemek için kullanılan CSS özelliğidir.
Blur ve Spread arasındaki fark nedir?
Blur gölgenin keskinliğini azaltıp dağıtırken, Spread gölgenin kapladığı alanı genişletir veya daraltır.
Birden fazla gölge ekleyebilir miyim?
CSS standardı virgülle ayırarak birden fazla gölgeye izin verir. Aracımız şu an için tekli gölge üretimine odaklanmıştır.
Gölge performansı etkiler mi?
Çok karmaşık ve çok sayıda büyük gölge, özellikle düşük donanımlı cihazlarda sayfa kaydırma performansını etkileyebilir.