CSS Oluşturucu

CSS Gölge Oluşturucu

box-shadow ve text-shadow değerlerini görsel olarak tasarlayın, katmanları birleştirin ve hazır CSS’i kopyalayın.

Gölge katmanları

Gölge ayarları

Hazır ayarlar

Canlı önizleme

Önizleme görünümü

Oluşturulan CSS

.shadow-box {
  box-shadow: 0px 18px 40px -12px rgba(99, 102, 241, 0.55);
}

CSS gölge değerlerini anlayın

box-shadow yatay ve dikey uzaklık, bulanıklık, yayılma, renk ve isteğe bağlı inset sözcüğünden oluşur. text-shadow uzaklık, bulanıklık ve renk kullanır. Kontroller tam bildirimi anında güncelleyerek her değerin etkisini gösterir.

Birden çok katmanla derinlik oluşturun

Birkaç hafif gölge genellikle tek bir ağır gölgeden daha doğal görünür. Temas için dar koyu katmanı, yükseklik için daha yumuşak geniş katmanla birleştirin veya ışıma oluşturmak için renkli katmanları üst üste koyun.

Önizlemeden üretim CSS’ine

box-shadow veya text-shadow seçin, bir hazır ayarla başlayın; ardından konum, bulanıklık, yayılma, opaklık, yarıçap ve renkleri ayarlayın. CSS’i kopyalayın ve projenizin gerçek arka planında ve duyarlı durumlarında test edin.

Öğrenin ve oluşturmaya devam edin

Bu aracı geliştirmemize yardım edin

Araç beklediğiniz gibi çalıştı mı?

Ekran görüntüsü veya örnek dosyayla kısa bir bildirim gönderin. Araç adı otomatik doldurulur.