AraçKutusu

CSS Box Shadow Oluşturucu

Yatay/dikey kaydırma, bulanıklık, yayılma ve gölge rengini kaydırıcılarla ayarlayın; kutu üzerinde canlı önizleyin. İç gölge (inset) desteğiyle hazır box-shadow CSS kodunu kopyalayın.

Gölge

Kutu görünümü

Önizleme arka planı

box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.25);

Tam kutu CSS'i

background: #ffffff;
border-radius: 16px;
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.25);

CSS Box Shadow Oluşturucu nedir, ne işe yarar?

CSS box-shadow oluşturucu, bir öğeye uygulanacak gölgenin kodunu görsel olarak üretmenizi sağlar. Yatay/dikey kaydırma, bulanıklık, yayılma ve gölge rengini kaydırıcılarla ayarlar, sonucu canlı önizler ve hazır CSS'i kopyalarsınız.

İç gölge (inset) seçeneğiyle gömülü/oyuk görünümler de üretilebilir. Gölgeler derinlik hissi vererek arayüzü daha profesyonel gösterir; üretilen kodu doğrudan box-shadow özelliğine yapıştırabilirsiniz.

CSS Box Shadow Oluşturucu nasıl yapılır?

  1. Yatay/dikey kaydırma, bulanıklık ve yayılmayı kaydırıcılarla ayarlayın.
  2. Gölge rengini ve saydamlığını seçin; isterseniz iç gölge (inset) açın.
  3. Canlı önizlemeyi görün, hazır box-shadow CSS kodunu kopyalayın.

Nerelerde kullanılır?

  • Kart ve panellere derinlik kazandırmak
  • Butonlara hover/tıklama gölgesi tasarlamak
  • Açılır menü ve bildirimlere gölge eklemek
  • İç gölgeyle gömülü giriş alanları oluşturmak

İpuçları

  • Yumuşak, geniş ve düşük saydamlıklı gölgeler modern ve zarif görünür.
  • Gölge rengini siyah yerine ana rengin koyu tonundan seçmek daha uyumlu durur.
  • Birden çok gölgeyi virgülle birleştirerek katmanlı derinlik oluşturabilirsiniz.

Gölge derinlik hissini nasıl kurar?

Bir gölge dört değerle tanımlanır: yatay kayma, dikey kayma, bulanıklık ve yayılma. Gerçek dünyada ışık genellikle yukarıdan geldiği için, doğal görünen gölgeler aşağı doğru kayar ve yatay kayması sıfıra yakındır. Yana kayan gölgeler yapay durur.

Yükseklik hissi bulanıklıkla kurulur. Yüzeye yakın duran bir kart küçük ve keskin gölge bırakır; havada yüksek duran bir öğe geniş ve yumuşak gölge bırakır. Bu ilişkiyi bozmak, öğenin nerede durduğunu belirsizleştirir.

Tek gölge yerine katmanlı gölge

Gerçekçi gölgeler tek bir tanımla elde edilmez. Doğada gölge, kaynağa yakın kısımda koyu ve keskin, uzaklaştıkça açık ve yumuşaktır. Bunu taklit etmek için birkaç gölgeyi üst üste bindirmek gerekir: küçük ve koyu bir gölge ile geniş ve çok soluk bir gölge birlikte kullanıldığında sonuç belirgin şekilde daha doğal olur.

Tek ve koyu bir gölge, arayüzü ucuz gösteren en yaygın sebeplerden biridir. Birkaç katman eklemek ek maliyet getirmez ve farkı hemen görünür.

İçe gölge ve kullanım yerleri

Gölge dışa doğru olabildiği gibi içe doğru da uygulanabilir. İçe gölge, öğenin yüzeye gömülü olduğu hissini verir; giriş alanlarında ve basılı düğme durumlarında kullanılır.

Bir düğmeye tıklandığında gölgeyi azaltmak veya içe çevirmek, öğenin gerçekten basıldığı izlenimini güçlendirir. Ürettiğiniz kodu doğrudan kopyalayabilirsiniz; hesaplama tarayıcınızda yapılır.

Sık sorulan sorular

Yayılma (spread) ne işe yarar?

Gölgenin boyutunu büyütür veya küçültür. Pozitif değer gölgeyi genişletir, negatif değer daraltır.

Inset (iç gölge) nedir?

Gölgeyi öğenin dışına değil içine uygular; oyuk/gömülü bir görünüm verir.

Birden fazla gölge eklenebilir mi?

CSS'te virgülle birden çok gölge tanımlanabilir. Bu araç tek gölge üretir; çıktıyı çoğaltıp virgülle birleştirerek katmanlı gölgeler oluşturabilirsiniz.

İlgili araçlar