İçeriğe geç
Devbench

CSS Kutu Gölgesi Oluşturucu

Kayma, bulanıklık, yayılma, opaklık ve iç gölge ayarlarıyla katmanlı gölgeler tasarlayın.

CSS
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
Tailwind sınıfı
shadow-[0_8px_24px_rgba(0,0,0,0.15)]

Katmanlar (1)

Katman 1 ayarları

px
px
px
px
%

Önizleme

px
Hazır ayarlar

Nasıl kullanılır

  1. Bir hazır ayarla başlayın veya varsayılan gölgeyi düzenleyin.
  2. X ve Y kaymasını, bulanıklığı, yayılmayı, rengi ve opaklığı ayarlayın.
  3. Gerçekçi derinlik için katman ekleyin veya iç gölge için inset seçeneğini açın.
  4. box-shadow bildirimini veya Tailwind sınıfını kopyalayın.

Sık sorulan sorular

Bulanıklık ve yayılma ne işe yarar?

Bulanıklık gölgenin kenarını yumuşatır; değer büyüdükçe gölge daha dağınık olur. Yayılma ise bulanıklık uygulanmadan önce gölgeyi büyütür (pozitif) veya küçültür (negatif).

Neden birden çok gölge katmanı kullanılır?

Gerçek dünyadaki gölgeler, sıkı ve koyu bir temas gölgesiyle daha büyük ve yumuşak bir ortam gölgesinin birleşimidir. Katmanları üst üste koymak bu derinliği yeniden oluşturur.

Inset ne demek?

Inset gölge, öğenin kenarlık kutusunun içine çizilir. Basılı butonlar ve giriş alanları için kullanışlıdır.

Diğer araçlar

CSS

CSS Gradyan Oluşturucu

Birden çok renk durağıyla doğrusal ve dairesel gradyanlar oluşturun, CSS'i kopyalayın.

Görsel

Görsel Optimize Edici

PNG, JPG, WebP, AVIF, GIF ve SVG görselleri tarayıcınızda sıkıştırın ve dönüştürün.

Metin

Metin Karşılaştırma

İki metni karşılaştırın; eklenen, silinen ve değişen satırları kelime düzeyinde vurgularla görün.

Görsel

Görselden Metne (OCR)

Ekran görüntülerinden, fotoğraflardan ve taranmış görsellerden OCR ile metin çıkarın, tarayıcınızda.