CSS Box Shadow & Border Radius Oluşturucu

CSS Box Shadow & Border Radius Oluşturucu

🎨 Canlı önizlemeli ücretsiz CSS box-shadow ve border-radius oluşturucu. Güzel gölgeler, yuvarlatılmış köşeler ve modern UI efektleri oluşturun. Web tasarımı için kopyala-yapıştır hazır kod.

Box Shadow Özelliği

CSS box-shadow özelliği, bir öğenin çerçevesi etrafına gölge efektleri ekler. Virgülle ayrılmış birden fazla efekt ayarlayabilirsiniz. Bir gölge; öğeye göre X ve Y kaymaları, blur ve spread yarıçapı ve renk ile tanımlanır.

Sözdizimi: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

Gölge Parametreleri

• X Kayması (yatay): Pozitif değerler gölgeyi sağa, negatif değerler sola taşır
• Y Kayması (dikey): Pozitif değerler gölgeyi aşağı, negatif değerler yukarı taşır
• Bulanıklık Yarıçapı: Daha yüksek değerler daha fazla blur oluşturur. 0 keskin gölge demektir
• Yayılma (Spread) Yarıçapı: Pozitif değerler gölgeyi büyütür, negatif değerler küçültür
• Renk: Herhangi bir CSS renk değeri (hex, rgb, rgba, hsl)
• Inset: Gölgeyi dış yerine iç gölge yapar

Border Radius Özelliği

border-radius özelliği, bir öğenin dış kenar köşelerini yuvarlatır. Dairesel köşeler için tek bir yarıçap, eliptik köşeler için iki yarıçap ayarlayabilirsiniz.

Sözdizimi: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

Yaygın Kullanım Alanları

• Kartlar: Orta radius (8px) ile hafif gölge (0 4px 6px rgba(0,0,0,0.1))
• Butonlar: Derinlik efekti için buton rengiyle uyumlu renkli gölge
• Modallar: Havada duruyormuş gibi görünmesi için büyük gölge (0 20px 25px rgba(0,0,0,0.15))
• Görseller: Daire avatarlar (border-radius: 50%) veya yuvarlatılmış küçük resimler (8–16px)
• Giriş Alanları: Basılı/odak durumları için inset gölge
• Neumorfik Tasarım: Uyumlu arka planla açık ve koyu çoklu gölgeler

Gölge İçin En İyi Uygulamalar

• Hafif gölgeler kullanın: Derinlik için genelde %10–20 opaklık yeterlidir
• Y kayması > X kayması: Yukarıdan gelen doğal ışığı taklit eder
• Yükseklik için daha fazla blur: Daha fazla blur = sayfadan daha yüksekte görünür
• Gölge rengini uyumlu seçin: Tutarlılık için öğe rengini düşük opaklıkla kullanın
• Performans: box-shadow animasyonundan kaçının; opacity veya transform kullanın

Popüler Gölge Stilleri

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

Border Radius Desenleri

• Yok (0px): Keskin köşeler, modern minimalist görünüm
• Küçük (4px): Inputlar ve butonlar için hafif yuvarlatma
• Orta (8px): Kartlar ve kapsayıcılar için standart
• Büyük (16px+): Daha sıcak, yaklaşılabilir tasarım
• Kapsül (999px veya 50%): Etiketler ve rozetler için yuvarlak uçlar
• Daire (50%): Avatarlar, ikon butonları (kare öğe gerekir)

Gelişmiş Teknikler

• Çoklu Gölgeler: Katmanlı efektler için gölgeleri birleştirin
• Parlama (Glow) Efekti: Kayma olmadan 0 0 20px [renk]
• Neumorfizm: Sol üstte açık, sağ altta koyu gölge
• Focus Halkaları: Erişilebilirlik için renkli gölge (0 0 0 3px rgba(renk,0.5))
• 3D Efekt: Artan kayma ve blur ile çoklu gölgeler

Tarayıcı Desteği

Box-shadow ve border-radius tüm modern tarayıcılarda desteklenir. IE8 ve daha eski sürümler için satıcı önekleri (-webkit-box-shadow, -moz-box-shadow) kullanılabilir; ancak günümüzde nadiren gerekir.

💡 İpucu: Hover efektleri için box-shadow’u doğrudan animasyonlamayın; maliyetlidir. Bunun yerine gölgeyi bir pseudo-elemente (::before veya ::after) ekleyip opaklığını animasyonlayın. Bu, özellikle mobil cihazlarda çok daha iyi performansla aynı görsel etkiyi sağlar!