☁️

css-box-shadow-generator,

CSS box-shadow Oluşturucu

Sezgisel bir kullanıcı arayüzü ile gelişmiş CSS gölgeleri (box-shadow) oluşturun.
Birden çok katmanı ve en son tasarım trendlerini destekleyen ücretsiz bir araç.

🥞

Çoklu katman

Zengin ifadeler için birden çok gölgeyi üst üste yığın

🎨

Hazır ayarlar

Neumorphism vb.'ni anında uygulayın.

⚡

Tailwind desteği

Hem standart CSS hem de Tailwind çıktısını destekler

Katman ayarları

Gölge parametreleri

X ofseti (px) 0px

Y ofseti (px) 4px

Bulanıklık (px) 12px

Yayılma (px) 0px

Gölge rengi

Opaklık (%) 10%

İç gölge (inset)

Önizleme

BOX

Width

120px

Height

120px

Border Radius

12px

Arka plan rengi

Kutu rengi

Hakkında

CSS box-shadow Oluşturucu, sezgisel bir kullanıcı arayüzü ile web tasarımı için temel gölge stilleri (box-shadow) oluşturan ücretsiz bir araçtır.

Yalnızca basit gölgeler değil, aynı zamanda çok katmanlı zengin gölgeler, Apple ve modern web hizmetleri tarafından kullanılanlar gibi pürüzsüz gölgeler, 3B Neumorphism ve düz Neo Brutalism de anında hazır ayarlardan oluşturulabilir.

Oluşturulan kod üç formatta çıkarılabilir: standart CSS özellikleri, CSS değişkenleri (özel özellikler) ve Tailwind CSS yardımcı sınıfları (gelişigüzel değerleri destekler) ve tek bir tıklamayla kopyalanabilir.

Nasıl kullanılır

1 Bir temel seçin

Üstten, oluşturmak istediğiniz görüntüye yakın bir hazır ayar seçin. Elbette katmanlar ekleyerek sıfırdan da oluşturabilirsiniz.

2 Gölgeleri ayarlayın

X/Y ofsetlerini (konum), bulanıklık gücünü, yayılmayı, rengi ve opaklığı ayarlayın. "Katman ekle" ile birden çok gölgeyi üst üste yığarak daha doğal ve lüks gölgeler oluşturabilirsiniz.

3 Kodu kopyala

Ortamınıza göre çıktı panelinden "CSS" veya "Tailwind"i seçin ve kodu kopyalamak için pano düğmesine basın.

Özellikler

box-shadow'un sözdizimi ve özellikleri


box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

offset-x / offset-y: Gölgenin yatay ve dikey konumu. Pozitif değerler gölgeyi sağa/aşağı hareket ettirirken, negatif değerler sola/yukarı hareket ettirir.
blur-radius (bulanıklık): Gölgenin bulanıklığı. Değer ne kadar büyük olursa, gölge o kadar geniş ve açık yayılır. 0'da keskin bir sınır (katı gölge) olur.
spread-radius (yayılma): Gölgenin kendi boyutunu genişletir veya küçültür. Pozitif değerler, öğeden daha büyük bir gölgeye neden olurken, negatif değerler daha küçük bir gölgeye neden olur.
inset (iç gölge): Bu anahtar kelime belirtildiğinde, gölge öğenin dışına değil içine düşer. Gömülü kullanıcı arayüzlerini ifade etmek için kullanılır.

SSS

Q. box-shadow performansı etkiler mi?

A.Büyük bulanık gölgeler ve çoklu katmanların çizimi maliyetlidir, bu nedenle mobil cihazlarda oluşturma yavaşlayabilir. box-shadow'u hareketlendirirken özel dikkat gerekir.

Q. box-shadow ile filter: drop-shadow arasındaki fark nedir?

A.box-shadow öğenin kutusuna (dikdörtgen) gölge uygular. Öte yandan, filter: drop-shadow() öğenin opak şekli için (şeffaf bir PNG'nin dış hatları gibi) bir gölge oluşturur.

Q. inset hangi ifadelerde kullanılır?

A.Düğmelerin basılı durumu (çöküntü efekti), metin alanlarının iç gölgeleri, Neumorphism'de vurgu çizimi vb. için kullanılır.

Q. Birden çok gölgeyi üst üste yığmanın faydaları nelerdir?

A.Birden çok katmanı üst üste yığmak, tek bir bulanık gölgeden daha doğal ve gerçekçi bir derinlik ifade edebilir. Örneğin, yakın bir gölgeyi (küçük ve koyu) ve uzak bir gölgeyi (büyük ve açık) üst üste yığmak yaygın bir tekniktir.

Kullanım senaryoları

Kart kullanıcı arayüzleri ve modaller

Öğeleri arka plandan öne çıkararak kullanıcıya tıklanabilir öğeler veya önemli içerikler olduklarını görsel olarak iletir.

Düğme üzerine gelme/etkin durumları

Fare üzerine geldiğinde gölgeyi yayarak veya tıklandığında `inset`e geçerek, basma hissine sahip etkileşimli bir düğme uygulayabilirsiniz.

Neumorphism tasarımı

Arka planla aynı renkteki bir öğenin üzerine açık ve koyu bir gölgeyi çapraz olarak yerleştirerek, öğenin dışarı itilmiş veya çökük görünmesini sağlayan bir doku oluşturursunuz.