CSS Kutu Gölge Oluşturucu
CSS kutu gölge değerlerini görsel olarak oluşturun — canlı önizleme ile ofseti, bulanıklığı, yayılmayı ve rengi ayarlayın.
CSS çıktısı
box-shadow: 0px 4px 12px 0px #00000026;PixConvert Kutu Gölge Oluşturucusunu Neden Kullanmalısınız?
Görsel kutu gölge düzenleyici — değerleri tahmin etmeye gerek yok, sadece sürükleyin ve önizleyin.
Canlı Önizleme
Gerçekçi bir kart önizlemesinde gölgenizi görün — her kaydırıcı değişikliğinde anında güncellenir.
Çoklu Gölge Katmanları
Gelişmiş derinlik efektleri için birden fazla gölge katmanını üst üste yerleştirin. Her katman bağımsız olarak kontrol edilir.
İç Gölgeler
Basma düğmesi efektleri ve iç parlama stilleri için içe doğru girinti modunu açıp kapatın.
Renk + Şeffaflık
Ayrı bir opaklık kaydırıcısı kullanarak istediğiniz gölge rengini seçin. Çıktı, hassas şeffaflık için rgba kullanır.
Hazır CSS Çıktısı
Çıktı, geçerli bir box-shadow CSS değeri dizesidir; doğrudan stil sayfanıza veya tasarım belirtecinize yapıştırın.
%100 Özel
Tamamen istemci tarafında çalışır — sunucu yok, veri toplama yok.
Kutu Gölgesi Kullanım Örnekleri
Gölgeler, kullanıcı arayüzü tasarımında derinlik ve hiyerarşi yaratır.
Kart Yüksekliği
Kartlar, modal pencereler ve paneller için Material Design tarzında yükseklik gölgeleri oluşturun.
- Yükseklik 1-24 gölge ölçekleri
- Yüzen eylem düğmesi gölgeleri
- Diyalog katmanı gölgeleri
Düğme Derinliği
Düğmelere 3 boyutlu derinlik kazandırmak için ince gölge efektleri ve içe doğru basılmış efektler ekleyin.
- Fareyle üzerine gelindiğinde hafif bir gölge efekti
- Basma durumu için içe doğru gölge
- Renkli parıltı efektleri
Neumorfizm
Katmanlı açık ve koyu gölgeler kullanarak nötromorfik kullanıcı arayüzü bileşenleri oluşturun.
- Açık ve koyu gölge katmanları
- Yumuşak kullanıcı arayüzü yükseltilmiş öğeler
- İçbükey kontroller
Kutu Gölgesi Nasıl Oluşturulur
Kaydırıcıları kullanarak X ofsetini, Y ofsetini, bulanıklık yarıçapını ve yayılmayı ayarlayın. Gölge rengi ve opaklığını seçin.
Canlı önizleme güncellemesini anında görün. CSS değerini kopyalayın ve stil dosyanıza yapıştırın.
Katmanlı efektler oluşturmak için içe doğru gölgeleri açıp kapatın veya birden fazla gölgeyi üst üste yerleştirin — çıktı virgülle ayrılmış ve yapıştırmaya hazır haldedir.
Daha Fazla Araç Keşfedin
Bu araçla birlikte harika çalışan diğer ücretsiz araçları keşfedin.
CSS Gradyan Oluşturucu
Özel CSS gradyanlarını görsel olarak oluşturun.
Kontrast Denetleyicisi
WCAG uyumluluğu için renk kontrast oranlarını kontrol edin.
Renk Dönüştürücü
HEX, RGB ve HSL renk kodlarını anında dönüştürün
Renk Paleti Çıkarıcı
Herhangi bir görüntüden baskın renkleri çıkarın.
JSON Biçimlendirici
JSON verilerini anında biçimlendirin, doğrulayın ve küçültün.
Regex Test Cihazı
Düzenli ifadeleri canlı olarak test edin ve hata ayıklayın.
Sıkça Sorulan Sorular
CSS box-shadow özelliğinin açıklaması.
Kutu gölge parametreleri nelerdir?
kutu-gölgesi: [içeri doğru] x-ofseti y-ofseti bulanıklık-yarıçapı yayılma-yarıçapı renk. X/Y ofseti: gölge konumu. Bulanıklık: yumuşaklık (0 = sert kenar). Yayılma: boyut genişlemesi (negatif = daha küçük). İçeri doğru: gölgeyi öğenin içine çizer.
Yumuşak bir gölge nasıl oluştururum?
Bulanıklık yarıçapını artırın (20-40 piksel), yayılmayı 0'a yakın tutun ve düşük opaklıkta bir renk kullanın (rgba(0,0,0,0.1-0.2)). Hafifçe kaydırın (y: 4-8 piksel). Bu, tasarım sistemlerinde yaygın olan modern 'yumuşak gölge' efektini oluşturur.
Birden fazla gölgeyi üst üste ekleyebilir miyim?
Evet. CSS, virgülle ayrılmış birden fazla gölge değeri kabul eder: box-shadow: shadow1, shadow2, shadow3. Neumorfizm veya çok renkli parlamalar gibi katmanlı efektler oluşturmak için 'Gölge katmanı ekle' düğmesini kullanın.
Bulanıklaştırma ve yayılma arasındaki fark nedir?
Bulanıklık, gölge kenarının ne kadar yumuşak olduğunu kontrol eder; daha yüksek bulanıklık daha dağınık bir etki yaratır. Yayılma, gölgenin boyutunu kontrol eder; pozitif yayılma gölgeyi öğeden daha büyük, negatif yayılma ise daha küçük yapar. Yayılma bulanıklığı etkilemez.
Kutu gölge efekti sayfa düzenini etkiler mi?
Hayır. `box-shadow`, kutu modelinin dışında oluşturulur ve öğenin boyutunu, konumunu veya belge akışını etkilemez. Gölge için öğenin etrafında boşluğa ihtiyacınız varsa, bunun yerine `margin` veya `padding` kullanın.