Kutu Gölgeleri Oluşturucu
Ücretsiz çevrimiçi CSS kutu gölgesi oluşturucu. Anlık önizleme, çok katmanlı ve hemen CSS çıktısı ile güzel gölgeler tasarlayın.
Anlık önizleme ile güzel CSS kutu gölgeleri tasarlayın.
Stil sayfanıza kopyala ve yapıştırın.
box-shadow:
0px 4px 6px -1px rgba(0, 0, 0, 0.1);Ücretsiz Online CSS Kutu Gölge Oluşturucu — Görsel Gölge Oluşturucu
Görsel olarak güzel CSS kutu gölgeleri oluşturun ve anlık önizleme ile çalışın. Bu ücretsiz kutu gölge oluşturucu, birden fazla katman, ön ayarlar, iç gölgeler ve hemen kullanıma hazır CSS kodu oluşturmayı destekler.
Kutu Gölge Oluşturucu Nedir?
Bir kutu gölge oluşturucu, web tasarımcı ve geliştiricilerin CSS box-shadow değerleri oluşturmak için manuel piksel değerleri yazmak zorunda kalmadan görsel bir araçtır. Sayıları tahmin etmek ve tarayıcıyı yeniden başlatmak yerine, kaydırıcıları ayarlayıp anlık olarak sonucu görebilirsiniz.
CSS box-shadow özelliği, bir öğenin çerçevesi etrafında gölge efektleri ekler. Modern web arayüzlerinde derinlik, yükseltme ve görsel hiyerarşi oluşturmak için en sık kullanılan CSS özelliklerinden biridir.
Bu Kutu Gölge Oluşturucuyu Nasıl Kullanılır?
- Bir ön ayar seçin — İnce, orta veya güçlü bir gölgeyle başlayın veya sıfırdan başlayın.
- Kaydırıcıları ayarlayın — X ofseti, Y ofseti, bulanıklık, yayılma, renk ve opaklık üzerinde kontrol sağlayın.
- İç gölgeyi etkinleştirin — Dış ve iç gölge arasında geçiş yapın.
- Katman ekleyin — Karmaşık efektler için birden fazla gölgeyi üst üste koyun.
- Önizlemeyi özelleştirin — Tasarımınıza uygun arka plan ve kutu renklerini değiştirin.
- CSS'yi kopyalayın — Kopyalama butonuna tıklayın ve kodu stiller dosyanıza yapıştırın.
Önemli Özellikler
| Özellik | Fiyatlılık |
|---|---|
| Anlık önizleme | Kaydırıcıları ayarladıkça değişiklikleri hemen görün |
| 6 ön ayar | Yaygın gölge stilleriyle hızlı başlangıç |
| Birden fazla katman | Gerçekçi efektler için gölgeleri üst üste koyun |
| İç gölge desteği | İçinde kalmış öğeler için iç gölge oluşturun |
| Renk seçici | Gölge rengine tam kontrol sağlayın |
| Opaklık kontrolü | Gölge şeffaflığını ince ayarlayın |
| Panoya kopyalama | Bir tıklamayla CSS dışa aktarımı |
CSS Kutu Gölgeyi Anlamak
Sözdizimi
box-shadow CSS özelliği şu sözdizimini takip eder:
box-shadow: [inset] offsetX offsetY blur spread color;
| Değer | Açıklama | Örnek |
|---|---|---|
| inset | (İsteğe bağlı) Gölgenin içe girmesini sağlar | inset |
| offsetX | Yatay ofset — pozitif = sağ, negatif = sol | 4px |
| offsetY | Dikey ofset — pozitif = aşağı, negatif = yukarı | 4px |
| blur | Bulanıklık yarıçapı — yüksek = yumuşak gölge | 12px |
| spread | Büyüme miktarı — pozitif = büyük, negatif = küçük | 0px |
| color | Alfa şeffaflığıyla gölge rengi | rgba(0,0,0,0.1) |
Birden Fazla Gölgeler
Gölgeleri virgülle ayırarak üst üste koyabilirsiniz:
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.1),
0 10px 20px rgba(0, 0, 0, 0.05);
Bu, öğenin yakınında sıkı, karanlık bir gölge ve daha uzakta, daha yumuşak, hafif bir gölge oluşturur — daha gerçekçi bir derinlik etkisi yaratır.
Gölgelerin Tarzı Karşılaştırması
| Tarz | CSS | Kullanım Durumu |
|---|---|---|
| İnce | 0 1px 3px rgba(0,0,0,0.08) |
Kartlar, liste öğeleri |
| Orta | 0 4px 6px rgba(0,0,0,0.1) |
Butonlar, modaller |
| Güçlü | 0 10px 15px rgba(0,0,0,0.15) |
Diyaloğlar, popoverlar |
| Işın | 0 0 20px rgba(59,130,246,0.4) |
Odak durumları, CTA'lar |
| İç | inset 0 2px 4px rgba(0,0,0,0.1) |
Girdiler, kuyular |
| Sert | 4px 4px 0 rgba(0,0,0,0.25) |
Retro/brutalist UI |
Gerçek Dünya Kullanım Durumları
Material Design Yükseltme
Material Design, yükseltme seviyelerini gölgelerle belirtir. Seviye-1 bir kart 0 1px 3px rgba(0,0,0,0.12) kullanır, seviye-4 bir diyalog ise 0 12px 17px rgba(0,0,0,0.14) kullanır.
Hover Etkileri
Hover etkisiyle gölgeyi derinleştirerek "yükselen" etkisi yaratın:
.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.15); }
Odak Durumları
Erişilebilir odak göstergeleri için renkli ışın kullanın:
input:focus { box-shadow: 0 0 0 3px rgba(59,130,246,0.5); }
Neumorphism
Arka plan rengine eşit renkte iç ve dış gölgeleri birleştirerek yumuşak, çıkıntı etkisi yaratın.
Daha İyi Gölgeler İçin İpuçları
| İpucu | Açıklama |
|---|---|
| Bulanıklığı hafif tutun | Gölgelerin çok fazla bulanıklığı olmasın |
| Düşük opaklık kullanın | Gölgelerin şeffaflığını azaltın |
| Yayılmanın dengesini sağlayın | Gölgelerin fazla yayılmaması için dengeli ayarlar yapın |
| Renklerin uyumlu olmasına dikkat edin | Gölgelerin renklerinin arka planla uyumlu olduğundan emin olun |
| Gölgelerin konumunu ayarlayın | Gölgelerin öğenin konumuna göre doğru yerde olduğundan emin olun |
Sıkça Sorulan Sorular
Kutu gölge oluşturucu nasıl çalışır?
Kutu gölge oluşturucu, bir öğenin çerçevesi etrafında gölge efektleri ekler. Modern web arayüzlerinde derinlik, yükseltme ve görsel hiyerarşi oluşturmak için en sık kullanılan CSS özelliklerinden biridir.
Birden fazla gölge nasıl eklenir?
Gölgeleri virgülle ayırarak üst üste koyabilirsiniz. Örneğin:
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.1),
0 10px 20px rgba(0, 0, 0, 0.05);
Bu, öğenin yakınında sıkı, karanlık bir gölge ve daha uzakta, daha yumuşak, hafif bir gölge oluşturur — daha gerçekçi bir derinlik etkisi yaratır.
Neumorphism nedir?
Neumorphism, arka plan rengine eşit renkte iç ve dış gölgeleri birleştirerek yumuşak, çıkıntı etkisi yaratır. Bu, kullanıcı arayüzlerinde daha modern ve etkileşimli bir görünüm sağlar.
Material Design yükseltme nedir?
Material Design yükseltme, yükseltme seviyelerini gölgelerle belirtir. Seviye-1 bir kart 0 1px 3px rgba(0,0,0,0.12) kullanır, seviye-4 bir diyalog ise 0 12px 17px rgba(0,0,0,0.14) kullanır. Bu, kullanıcı arayüzlerinde daha modern ve etkileşimli bir görünüm sağlar.
Odak durumları nedir?
Odak durumları, kullanıcıların bir öğeye tıkladığında veya üzerine geldiğinde görünen etkilerdir. Bu, kullanıcı arayüzlerinde daha modern ve etkileşimli bir görünüm sağlar.