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

Hazir Şablonlar

Canlı Önizleme

CSS Çıktısi

Tüm işlemler tarayıcınızda gerçekleşir. Hiçbir veri sunucuya gönderilmez.

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

X kayma gölgeyi sola (negatif) veya sağa (pozitif) taşır. Y kayma yukarı (negatif) veya aşağıya (pozitif) taşır. Bulanıklık yumuşaklığı belirler — 0 keskin bir kenar, yüksek değerler daha yumuşak bir görünüm verir. Yayılım gölge boyutunu bulanıklaştırmadan önce genişletir (pozitif) ya da daraltır (negatif). Yüksek bulanıklıkla birlikte negatif yayılım, daha gerçekçi ve sıkı bir gölge oluşturur.

İstediğiniz kadar. CSS box-shadow virgülle ayrılmış gölge değerleri listesi kabul eder. Birden fazla katman sayesinde derinlik için koyu ve dar bir gölgeyi, ortam ışığı için daha geniş ve açık bir gölgeyle birleştirebilirsiniz. Her katmanın bağımsız kayma, bulanıklık, yayılım, renk ve inset ayarları vardır.

Inset, gölgeyi elemanın dışına değil içine render eder. Inset olmadan gölge, elemanı yükseltilmiş ya da havada süzülür gibi gösterir. Inset ile gölge, içeri basılmış, çukurlaşmış veya nöromorfik bir görünüm sağlar. Gömülü görünen input alanları ya da aktifken basılı görünen butonlar için idealdir.

#000000 gibi düz renkler, beyaz olmayan her arka plan üzerinde sert görünür. rgba(0, 0, 0, 0.15) gibi yarı saydam renkler ise arkasındaki her şeyle doğal biçimde kaynaşır. Çoğu arayüz gölgesi %10-25 opaklıkla siyah kullanır.

Hafif: kartlar için neredeyse fark edilmeyen bir gölge. Orta: standart kart yükseltme gölgesi. Güçlü: modal veya katmanlar için daha derin bir gölge. Yüzen: elemanları havada gibi gösteren yüksek kaymali gölge. Ic Gölge: basılı durum butonları için iç gölge. Katmanlı: gerçekçi çok derinlikli etki için iki birleşik gölge.

Nöromorfizm iki gölge kullanır: biri arka plandan biraz daha açık, diğeri biraz daha koyu. Örnek: açık gri bir arka planda "box-shadow: 6px 6px 12px #b8b9be, -6px -6px 12px #ffffff". İki katmanı etkinleştirin, zıt X/Y yönleri ayarlayın ve arka plan renginizin açık/koyu varyantlarını kullanın.

Hayır. outline veya border'ın aksine, box-shadow elemanın boyutlarını ya da düzen akışını etkilemez. Gölge, diğer elemanları itmeden kutu modelinin dışında (ya da inset ile içinde) render edilir. Yayılım değerleri, elemanın hesaplanan genişliğine veya yüksekliğine eklenmez.

Hayır. Tüm CSS oluşturma işlemi tarayıcınızda yerel olarak çalışır. Hiçbir şey yüklenmez veya saklanmaz.

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.

Güvenlik ve Gizlilik

Verilerinizin güvenliği bizim önceliğimiz

Yerel İşleme

Tüm işlemler tarayıcınızda gerçekleşir

Veri Transferi Yok

Verileriniz sunucularımıza gönderilmez

Veri Depolama Yok

Hiçbir veri depolanmaz veya paylaşılmaz

SSL Şifreleme

Güvenli bağlantı için SSL şifreleme

Sonraki Adım

Border Radius Oluşturucu

Görsel önizleme ile CSS border-radius oluşturun

CSS Gradient Oluşturucu

Canlı önizleme ile CSS gradient oluşturun

Bu araç işinize yaradı mı?

Box Shadow Oluştürücu