CSS Box Shadow Oluşturucu

CSS box-shadow'u görsel olarak tasarlayın. Bulanıklık, yayılma, renk ve konumu kaydırıcılarla ayarlayın; hazır CSS kodunu tek tıkla kopyalayın.

Gölge Ayarları

İç Gölge (Inset)

Yatay Konum (X) 10px

Dikey Konum (Y) 10px

Bulanıklık (Blur) 15px

Yayılma (Spread) 0px

Gölge Rengi

Kutu Rengi

Arkaplan Rengi

CSS Kodu

CSS Kutu Gölgeleri Tasarlayın

X ve Y kaydırmayı, bulanıklık yarıçapını, yayılmayı, iç gölge modunu ve rengi ayarlayın; buton, kart, panel ve modal'larınız için hazır box-shadow CSS'ini kopyalayın.

Gölgeleri Hafif ve Okunur Tutun

Büyük bulanıklık veya yayılma değerleri ağır görünür, kontrastı düşürür ve çok sayıda öğede tekrarlanınca mobil performansı zedeler. Gölgeleri gerçek sayfa arka planında test edin.

Kutu Gölgeleri Nerede Kullanılır?

Kartları, açılır menüleri, diyalogları, sabit başlıkları ve vurgu kutularını ayırmak için gölge kullanın. Önemli durum değişikliklerini yalnızca gölgeyle göstermekten kaçının.