Box Shadow Üretici

Bu araç ne işe yarar?

Box Shadow Üretici, CSS box-shadow değerlerini kaydırıcılarla görsel olarak oluşturmanızı ve canlı önizlemede anında görmenizi sağlar. Tasarımcılar, frontend geliştiriciler ve kod yazmadan zarif gölgeler isteyen herkes için idealdir.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Nasıl çalışır

Yatay (X), dikey (Y), bulanıklık, yayılma ve saydamlık kaydırıcılarını ayarlarsınız; araç bunları rgba renk değeriyle birlikte geçerli bir box-shadow kuralına dönüştürür. En fazla dört gölge katmanı ekleyebilir, her birini ayrı renk ve değerlerle düzenleyebilir, böylece çok katmanlı derinlik efektleri oluşturabilirsiniz. İç gölge (inset) seçeneğiyle kutunun içine düşen gölgeler de yapabilirsiniz. Önizleme kutusunun ve arka planın rengini değiştirerek gölgeyi gerçek tasarımınızda nasıl görüneceğini test edebilirsiniz.

Hazır ayarlar ve kullanım

Yumuşak, Sert, Yükseltilmiş, İç gölge, Mavi parıltı ve Mor parıltı olmak üzere altı hazır ayar tek tıkla uygulanır ve başlangıç noktası sunar. Üretilen kod 'box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.25);' biçimindedir ve kopyala düğmesiyle doğrudan CSS dosyanıza yapıştırılır. Kartlar, butonlar, modallar ve açılır menüler için derinlik katmak veya bir öğeyi parıltıyla vurgulamak gibi durumlarda hızlıca kullanışlıdır.

Sıkça sorulan sorular

Kaç gölge katmanı ekleyebilirim?

En fazla dört katman ekleyebilirsiniz. Her katmanın kendi X, Y, bulanıklık, yayılma, renk, saydamlık ve iç gölge ayarları vardır; çıktıda virgülle ayrılır.

İç gölge (inset) nedir?

İç gölge seçeneği, gölgeyi öğenin dışına değil içine düşürür. Girinti, basılı düğme veya oyuk efektleri için kullanılır.

Renk neden rgba olarak çıkıyor?

Seçtiğiniz hex renk ve saydamlık yüzdesi birleştirilerek rgba değerine dönüştürülür; böylece gölgenin opaklığını ayrı ayrı kontrol edebilirsiniz.