CSS Gölge Üretici

CSS box-shadow veya text-shadow efektlerini görsel olarak tasarlayın ve kodu kopyalayın.

Yatay Kayma (Horizontal Offset): 0px
Dikey Kayma (Vertical Offset): 8px
Bulanıklık Yarıçapı (Blur Radius): 24px
Yayılma Yarıçapı (Spread Radius): -4px
Gölge Opaklığı: 10%
Gölge Rengi
Hazır Şablon Kütüphanesi
Önizleme Arka Plan Rengi
CSS Kod Çıktısı
box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.1);
Tailwind CSS Eşdeğeri
shadow-[0px_8px_24px_-4px_rgba(0,0,0,0.1)]
7.536 görüntülenmeVerileriniz tarayıcınızda işlenir, sunucuya hiçbir şey gönderilmez.

İlgili araçlar

JSON Biçimlendirici
JSON'u çevrimiçi doğrula, güzelleştir ve küçült. Her şey tarayıcında çalışır — ücretsiz ve gizli.
Base64 Çevirici
Base64 metnini tarayıcında anında kodla veya çöz. Ücretsiz ve gizli.
URL Encode
URL ve sorgu dizelerini tarayıcında anında kodla veya çöz. Ücretsiz ve gizli.
Renk Seçici
İstediğin rengi seç, CSS ve tasarım araçları için HEX, RGB ve HSL kodlarını anında al. Ücretsiz, gizli, tarayıcında çalışır.

Bu aracı tanıyalım

CSS Shadow (Gölge) Üretici, basit kaydırıcılar ve bir renk seçici kullanarak box-shadow efektinizi ayarlamanızı sağlar; canlı önizleme kutusu sayesinde CSS kodunu kopyalamadan önce tam olarak nasıl görüneceğini görürsünüz.

CSS Shadow (Gölge) Üretici Nedir ve Neden Kullanışlıdır?

Bir box-shadow değerini elle doğru ayarlamak genellikle çok fazla deneme-yanılma gerektirir — kod editörünüzde konum, bulanıklık ve opaklığı değiştirip her seferinde tarayıcıyı yenilemek. Bu araç bu döngüyü tamamen ortadan kaldırır: her kaydırıcı önizlemeyi anında güncelleştirir, böylece gölgeyi görsel olarak ince ayarlayabilir ve istediğiniz görünüme ulaştığınız anda hazır CSS kodunu alabilirsiniz.

Temel Özellikler

  • Yatay ve Dikey Konum: Gölgenin sola/sağa ve yukarı/aşağı ne kadar kaydığını -50px ile 50px arasında kontrol edin.
  • Bulanıklık ve Yayılma Yarıçapı: Gölgenin ne kadar yumuşak ve ne kadar geniş yayıldığını ayarlayın.
  • Opaklık ve Renk Seçici: Herhangi bir rengi seçin ve tamamen şeffaftan tamamen opak hale kadar kaydırın.
  • Canlı Önizleme: Herhangi bir kaydırıcıyı hareket ettirdiğinizde örnek kutu anında güncellenir, böylece sonucu her zaman tam olarak görürsünüz.
  • Kopyalamaya Hazır CSS: Tam box-shadow kodu çıktı alanında otomatik olarak oluşturulur.

Nasıl Kullanılır?

  1. Gölgeyi şekillendirmek için Horizontal Offset, Vertical Offset, Blur Radius ve Spread Radius kaydırıcılarını sürükleyin.
  2. Opacity kaydırıcısını ayarlayın ve bir gölge Color (renk) seçin.
  3. Önizleme kutusunun canlı olarak güncellenmesini izleyerek gölgenin nasıl görüneceğini görün.
  4. CSS Code alanındaki oluşturulan box-shadow: ...; satırını kopyalayıp stil dosyanıza yapıştırın.

Bu Aracı Neden Tercih Etmelisiniz?

Basit bir görsel stil aracının ağ üzerinden veri göndermesine hiçbir gerek yoktur. Bu üretici, RGBA renk dönüşümü ve nihai CSS dizesi dahil her şeyi tamamen tarayıcınızda JavaScript kullanarak hesaplar. Tasarımınızla ilgili hiçbir bilgi herhangi bir yere gönderilmez ve sonuç her kaydırıcı hareketinde anında güncellenir.

Sıkça Sorulan Sorular (SSS)

Bu araç text-shadow (metin gölgesi) de üretiyor mu?

Hayır, bu araç özellikle kartlar, butonlar ve konteynerler için kullanılan box-shadow üzerine odaklanmıştır. Önizleme kutusu bir box-shadow efektini gösterir.

Birden fazla / katmanlı gölge oluşturabilir miyim?

Araç aynı anda tek bir gölge katmanı üretir. Birden fazla gölgeyi birleştirmek için, üretilen birkaç değeri CSS'te virgülle ayırarak manuel olarak zincirleyebilirsiniz.

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

Spread, gölgenin boyutunu öğenin sınır kutusunun dışına genişletir veya küçültür. Pozitif değerler gölgeyi büyütür; negatif değerler küçültür.

Üretilen CSS tüm tarayıcılarda destekleniyor mu?

Evet, box-shadow Chrome, Firefox, Safari ve Edge dahil tüm modern tarayıcılarda uzun yıllardır desteklenmektedir.