CSS Box Shadow Oluşturucu

Görsel olarak kutu gölgesi tasarlayın, anında CSS kodu alın. Çoklu gölge ve hazır stiller desteklenir.

Anlık sonuç Tarayıcıda çalışır

İpucu: "Gölge Ekle" ile birden fazla katmanlı gölge oluşturabilirsiniz — gerçekçi derinlik efektleri için idealdir.

Önizleme

Önizleme arka planı

Hazır Stiller

Nasıl kullanılır?

  1. 1
    Değerleri ayarlayınX/Y kaydırma, bulanıklık, yayılma, renk ve opaklığı dilediğiniz gibi ayarlayın. Önizleme anında güncellenir.
  2. 2
    Çoklu gölge ekleyin"Gölge Ekle" ile ek katmanlar oluşturun. Her katmanı bağımsız olarak ayarlayabilirsiniz.
  3. 3
    CSS'i kopyalayınCSS kodunu kopyalayıp projenize yapıştırın. Hem tam kural hem de yalnızca değer formatı desteklenir.

Sıkça sorulan sorular

box-shadow değerleri ne anlama gelir?
box-shadow sözdizimi: offset-x | offset-y | blur-radius | spread-radius | color. Örneğin "4px 8px 16px 0px rgba(0,0,0,0.2)": yatay 4px, dikey 8px, 16px bulanıklık, yayılma yok, %20 siyah. inset anahtar kelimesi gölgeyi elemanın içine alır.
Çoklu gölge ne işe yarar?
CSS box-shadow virgülle ayrılmış birden fazla gölge tanımını destekler. Bu sayede katmanlı, gerçekçi derinlik efektleri oluşturulabilir. Örneğin Material Design'da yumuşak ve sert iki gölge katmanı kullanılır.
Tarayıcı desteği nasıl?
box-shadow, Chrome, Firefox, Safari, Edge dahil tüm modern tarayıcılarda tam olarak desteklenir. Vendor prefix (-webkit-, -moz-) artık gerekli değildir. IE 9+ da temel desteğe sahiptir.

CSS box-shadow Nedir?

box-shadow özelliği, bir HTML elemanının etrafına gölge efekti ekler. Arka plan görüntüsü gerektirmeden derinlik, yükseklik ve katmanlı efektler oluşturur. Kart tasarımları, butonlar, modal pencereler ve form elemanları için yaygın olarak kullanılır.

Sözdizimi

box-shadow: [inset] offset-x offset-y blur spread color;

  • offset-x/y: Gölgenin yatay ve dikey konumu. Negatif değerler sol/üst yönünde gölge oluşturur.
  • blur: Bulanıklık yarıçapı. Yüksek değer yumuşak, 0 keskin gölge verir.
  • spread: Gölge boyutunu büyütür veya küçültür. Negatif değer gölgeyi daraltır.
  • inset: Gölgeyi elemanın dış yerine iç yüzeyine uygular.

Tasarım İpuçları

Gerçekçi gölgeler için genellikle iki katman kullanılır: biri büyük ve soluk (yükseklik hissi), diğeri küçük ve yoğun (temas noktası). Renkli gölgeler markanın rengiyle uyumlu olduğunda modern ve öne çıkan bir görünüm sağlar.

Yorumlar