CSS Box Shadow Oluşturucu
CSS box-shadow değerlerini görsel olarak oluşturun — ofset, bulanıklık, yayılma ve rengi canlı önizlemeyle ayarlayın.
CSS çıktısı
box-shadow: 0px 4px 12px 0px #00000026;PixConvert Box Shadow Oluşturucu'yu neden kullanmalısınız
Görsel box-shadow düzenleyici — tahmin yürütmeden değerleri sürükleyin ve önizleyin.
Canlı önizleme
Gölgenizi gerçekçi bir kart önizlemesinde görün — her kaydırıcı değişikliğinde anında güncellenir.
Birden fazla gölge katmanı
Gelişmiş derinlik efektleri için birden fazla gölge katmanını üst üste ekleyin. Her katman bağımsız olarak kontrol edilir.
İç gölgeler
Basılmış düğme efektleri ve iç parıltı stilleri için inset modunu açın.
Renk + opaklık
Ayrı bir opaklık kaydırıcısıyla istediğiniz gölge rengini seçin. Çıktı, hassas saydamlık için rgba kullanır.
Kullanıma hazır CSS çıktısı
Çıktı geçerli bir box-shadow CSS değer dizesidir — doğrudan stil dosyanıza veya tasarım token'ınıza yapıştırın.
%100 gizli
Tamamen istemci tarafında çalışır — sunucu yok, veri toplama yok.
Box shadow kullanım alanları
Gölgeler arayüz tasarımında derinlik ve hiyerarşi oluşturur.
Kart yüksekliği
Kartlar, modallar ve paneller için Material Design tarzı yükseklik gölgeleri oluşturun.
- Elevation 1-24 gölge ölçekleri
- Kayan eylem düğmesi gölgeleri
- Diyalog katmanı gölgeleri
Düğme derinliği
3B derinlik için düğmelere ince gölgeler ve iç gölgeli basılma efektleri ekleyin.
- Üzerine gelince ince gölge
- Basılı durum için iç gölge
- Renkli parıltı efektleri
Neumorphism
Katmanlı açık ve koyu gölgeler kullanarak neumorphic arayüz bileşenleri oluşturun.
- Açık + koyu gölge katmanları
- Soft UI kabartmalı öğeler
- İçbükey inset kontroller
Box shadow nasıl oluşturulur
Kaydırıcıları kullanarak X ofseti, Y ofseti, bulanıklık yarıçapı ve yayılmayı ayarlayın. Bir gölge rengi ve opaklık seçin.
Canlı önizlemenin anında güncellendiğini görün. CSS değerini kopyalayın ve stil dosyanıza yapıştırın.
Katmanlı efektler oluşturmak için iç gölgeleri açın veya birden fazla gölgeyi üst üste ekleyin — çıktı virgülle ayrılır ve yapıştırmaya hazırdır.
Daha Fazla Aracı 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 denetleyici
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örseldeki baskın renkleri çıkarın
JSON biçimlendirici
JSON'u anında biçimlendirin, doğrulayın ve küçültün
Regex test aracı
Düzenli ifadeleri canlı olarak test edin ve hata ayıklayın
Sık sorulan sorular
CSS box-shadow'un açıklaması.
box-shadow parametreleri nelerdir?
box-shadow: [inset] x-offset y-offset blur-radius spread-radius color. X/Y ofseti: gölgenin konumu. Blur: yumuşaklık (0 = sert kenar). Spread: boyut genişlemesi (negatif = daha küçük). Inset: gölgeyi öğenin içine çizer.
Yumuşak bir gölgeyi nasıl oluşturabilirim?
Bulanıklık yarıçapını artırın (20-40px), yayılmayı 0'a yakın tutun ve düşük opaklıklı bir renk kullanın (rgba(0,0,0,0.1-0.2)). Gölgeyi hafifçe kaydırın (y: 4-8px). Bu, tasarım sistemlerinde yaygın olan modern “soft drop shadow” efektini oluşturur.
Birden fazla gölgeyi üst üste ekleyebilir miyim?
Evet. CSS, virgülle ayrılmış birden fazla gölge değerini kabul eder: box-shadow: shadow1, shadow2, shadow3. Neumorphism veya çok renkli parıltılar gibi katmanlı efektler oluşturmak için “Gölge katmanı ekle” düğmesini kullanın.
Blur ile spread arasındaki fark nedir?
Blur, gölge kenarının ne kadar yumuşak olduğunu belirler — blur ne kadar yüksekse gölge o kadar dağınık olur. Spread ise gölgenin boyutunu belirler — pozitif spread gölgeyi öğeden büyük, negatif spread ise daha küçük yapar. Spread, bulanıklığı etkilemez.
box-shadow yerleşimi etkiler mi?
Hayır. box-shadow, kutu modelinin dışında çizilir ve öğenin boyutunu, konumunu veya belge akışını etkilemez. Gölge için öğenin çevresinde boşluk gerekiyorsa bunun yerine margin veya padding kullanın.