Box Shadow Oluştürücu
Birden fazla katmanla gölge tasarlayin ve kullanıma hazir CSS kodu alin
Box Shadow Oluştürücu
Canlı Önizleme
CSS Çıktısi
Kullanım Örnekleri
Hafif Kart Gölgesi
Kartlar ve içerik kapsayicilari için mukemmel, hafif ve zarif bir gölge.
Cok Katmanlı Gölge
Zengin, katmanlı bir derinlik efekti için birden fazla gölge katmanini birleştirin.
Ic Gölge
Basilmis veya iceri cekilmis eleman efektleri için ic gölgeler oluştürün.
Özellikler
Birden Fazla Gölge Katmani
Karmaşık, gerçekci gölge efektleri oluşturmak için birden fazla gölge katmani ekleyin ve yapılandırın
Canlı Görsel Önizleme
Kayma, bulanıklık, yayılim ve rengi ayarladikca gölge efektinin gerçek zamanli güncelledigini görün
Renk Seçici ve Şablonlar
Yerel seçici ile özel renkler seçin ve hizli tasarım için hazir gölge şablonlarıni kullanin
Gizlilik Oncelikli
Her sey tarayıcınızda çalışır — hiçbir veri sunucuya gönderilmez
Nasıl Kullanılır?
Gölgeyi Yapılandırın
Her gölge katmani için X/Y kayma, bulanıklık, yayılim ve rengi ayarlayın. Ic gölgeler için inset seçeneğini acin.
Daha Fazla Katman Ekleyin
Daha karmaşık efektler için ek gölge katmanlari oluşturmak uzere Katman Ekle butonuna tıklayın.
CSS Kodunu Kopyalayın
Oluştürülan box-shadow kodunu panoya kopyalamak için CSS Kopyala butonuna tıklayın.
Sık Sorulan Sorular
Box Shadow Oluşturucu Nedir?
Box shadow oluşturucu, CSS box-shadow efektlerini elle kod yazmadan tasarlamanızı sağlayan görsel bir araçtır. X/Y offset, bulanıklık, yayılım ve renk kaydırıcılarını ayarlarsınız, CSS gerçek zamanlı güncellenir. Doğru görünümü yakalayana kadar deneyip sonra kodu kopyalarsınız.
Temel Özellikler
Birden fazla gölge katmanı desteği sayesinde yumuşak ve sert gölgeleri üst üste koyarak derinlik oluşturabilirsiniz. Her katmanın kendi renk seçicisi ve inset düğmesi var. Ayrıca hafif kartlar, yüzen elemanlar ve katmanlı derinlik efektleri gibi yaygın stiller için hazır şablonlar mevcut.
Yaygın Kullanım Alanları
Kart bileşenleri ve modal pencereler genellikle hafif bir yükselme efektine ihtiyaç duyar. Butonlar hover durumunda hafif bir gölgeden fayda görür. Inset gölgeler input alanları veya basılı durum butonları için harika çalışır. Çoklu katman gölgeleri hero bölümlerine premium bir görünüm kazandırır.
Daha İyi Gölgeler İçin İpuçları
Doğal bir görünüm için bulanıklık değerlerini yayılımdan yüksek tutun. Düz renkler yerine yarı saydam siyahlar (rgba(0,0,0,0.1) gibi) kullanın. Gerçekçi aydınlatma için farklı offset değerlerinde iki-üç gölge katmanlayın. Ve unutmayın, azı karar çoğu zarar.
Gizlilik
Her şey tarayıcınızda çalışır. Gölge verileri, ayarlar, hiçbir şey bilgisayarınızdan çıkmaz. Sadece siz ve CSS'iniz.