CSS Box-Shadow Üreteci

Canlı önizlemeyle gölge ayarlayın ve kodu kopyalayın.

Ücretsiz
Tüm araçlar tarayıcınızda çalışır; sunucularımıza hiçbir veri gönderilmez.

CSS Box-Shadow Üreteci hakkında

Gölgeler arayüz öğelerine yükseklik hissi veren şeydir. Profesyonel görünen gölgelerin sırrı, tek bir büyük koyu gölge yerine iki üç yumuşak ve düşük opaklıkta gölgeyi katmanlamaktır — gerçek ışığın yaptığı da tam budur.

CSS Box-Shadow Üreteci nasıl kullanılır

  1. 1

    Yatay ve dikey kaymayı ayarlayın; ışık yukarıdan geldiği için genelde yalnızca dikey değer alır.

  2. 2

    Yumuşaklık doğru görünene kadar bulanıklık ve yayılmayı ayarlayın.

  3. 3

    Gölge rengini ve opaklığını seçin — düşük opaklık daha doğal okunur.

  4. 4

    CSS kodunu kopyalayın.

Sıkça sorulan sorular

Gölgeyi nasıl doğal gösteririm?

Opaklığı düşük tutun, yaklaşık yüzde on ile yirmi arası, bulanıklığı cömert bırakın. Tam opak siyah gölge neredeyse her zaman yapay görünür.

İç gölge ne işe yarar?

Çöküntüler için — bir giriş alanı veya basılı düğme. Öğenin sayfadan yükselmiş değil içine gömülmüş okunmasını sağlar.

Gölgeler performansı etkiler mi?

Birkaç tanesi sorun değil. Onlarca hareketli öğede çok büyük bulanıklık yarıçapları zayıf cihazlarda kare hızına mal olabilir.

İlgili araçlar

Renk Dönüştürücü (HEX/RGB/HSL) Renk formatları arasında dönüştürün, kontrastı kontrol edin. CSS Gradyan Üreteci Doğrusal ve radyal gradyanlar oluşturun, hazır CSS alın.
Tüm araçları gör