Her gün elinin altında olan geliştirici araçları, hepsi tek yerde.

Dönüştürücüler, formatlayıcılar, hash'ler, doğrulayıcılar ve sürekli yeniden açtığın küçük yardımcılar sekmeler arasında kaybolmak yerine bir arada duruyor.

GitHub

/ Araçlar

■

/ Araç Bulucu

109 araç

/ Box Shadow Üretici

Hazır Ayarlar

Gölgeler (2/5)

Gölge 1

İç Gölge

Yatay: 0px

Dikey: 4px

Bulanıklık: 6px

Yayılma: -1px

Renk

Opaklık: 10%

Gölge 2

İç Gölge

Yatay: 0px

Dikey: 2px

Bulanıklık: 4px

Yayılma: -2px

Renk

Opaklık: 10%

Önizleme Arka Planı

Önizleme

CSS Kodu

Tailwind Keyfi Değer

/ Seçili Araç

■

Box Shadow Üretici - ücretsiz oluşturucu aracı

Birden çok gölge desteğiyle görsel CSS box-shadow üretici

■ 01

CSS Box Shadow nedir?

CSS box-shadow özelliği, bir öğenin çerçevesi etrafına gölge efektleri ekler. Virgülle ayrılmış birden çok gölge tanımlayabilirsin. Her gölge; yatay ve dikey ötelemeler, bulanıklık ve yayılma yarıçapı, renk ve…

■ 02

Nasıl çalışır?

Box gölgeleri çeşitli değerlerle tanımlanır: yatay öteleme (pozitif sağa taşır), dikey öteleme (pozitif aşağı taşır), bulanıklık yarıçapı (daha büyük olan daha fazla bulanıklık demek), yayılma yarıçapı (pozitif genişletir, negatif küçültür) ve r…

■ 03

Örnek Durumlar

İnce gölge, orta yükseltme ve iç gölgeyi (inset) kapsar; böylece yaygın girdileri ve çıktıları hızlıca karşılaştırabilirsin.

/ İlgili Araçlar

/ Kod

■

Seçili araca ait kaynak kodu; sağdaki canlı sürümün yanında burada gösteriliyor.

/ Kaynak Kodu

TypeScript

typescript

// No external dependencies needed - generates CSS box-shadow strings

interface Shadow {
  horizontal: number;
  vertical: number;
  blur: number;
  spread: number;
  color: string;
  opacity: number;
  inset: boolean;