X / Y offset — gölgenin düştüğü yön (pozitif Y = aşağı). "Yukarıdan ışık" hissi için Y > 0 ve küçük veya sıfır X kullan. Blur — kenarın ne kadar yumuşak olduğu. 0 = keskin; daha büyük = daha yumuşak. Spread — gölgenin kutudan ne kadar büyük (veya negatifse küçük) olduğu. Renk & alfa — genellikle kısmi alfalı siyah veya marka rengi. Saf #000 çok ağır görünür; doğal derinlik için #0003 ile #0002 dene. Inset — gölgeyi içe çevirir, girinti gibi.

CSS Box Shadow Oluşturucu

Tek veya çok katmanlı CSS box shadow'ları görsel olarak kur. Offset, blur, spread, renk ayarla ve CSS'i kopyala.

Shadow layers

Preview

Sample

CSS

Bu ne işe yarar?

CSS box-shadow özelliği derinlik eklemek için iş atıdır — kartlarda drop shadow, düğme highlight, focus ring, glow, neon efektleri, hatta sahte 3D. Sözdizimi (x y blur spread color, isteğe bağlı inset, virgülle ayrılmış birden fazla gölge) okuması kolaydır ama körü körüne ayarlamak zahmetlidir. Bu araç her değer için kaydırıcılar ve canlı önizleme, artı yaygın tasarım sistemi yüksekliklerini eşleştiren preset'ler sunar.

Ne zaman kullanılır

"Ucuz ve sert" görünmeyen kart veya modal yüksekliği tasarlama.
Erişilebilirlik için focus-ring stili kurma (örn. 2px outline glow).
Bir hero CTA için neon veya glow efekti hazırlama.
Material Design veya Apple stili yükseklik token'larını bir tasarım sistemi için kopyalama.
Basılı düğme efekti veya kart girintisi için sahte "inset" derinlik üretme.

Her değer ne yapar

X / Y offset — gölgenin düştüğü yön (pozitif Y = aşağı). "Yukarıdan ışık" hissi için Y > 0 ve küçük veya sıfır X kullan.
Blur — kenarın ne kadar yumuşak olduğu. 0 = keskin; daha büyük = daha yumuşak.
Spread — gölgenin kutudan ne kadar büyük (veya negatifse küçük) olduğu.
Renk & alfa — genellikle kısmi alfalı siyah veya marka rengi. Saf #000 çok ağır görünür; doğal derinlik için #0003 ile #0002 dene.
Inset — gölgeyi içe çevirir, girinti gibi.

Sık yapılan hatalar

Tek büyük gölge yapay görünür. Gerçek yükseklik iki veya üç katman üst üstedir: sıkı, koyu, yakın bir gölge artı geniş, yumuşak, uzak bir gölge. "Material elevation" preset'i bu deseni gösterir.
Saf siyah çok ağırdır. ~%10–25 alfa siyah kullan veya gölgeyi yüzeyin tamamlayıcısıyla renklendir.
Gölgeler kutu dışında render olur. Container'ın overflow: hidden varsa, gölge kırpılır. Bir wrapper kullan veya overflow'u bir child'a taşı.
Şeffaf arka planda gölge. Kutunun background'u yoksa, gölge kutunun kendisinden geçer — genellikle sürpriz.
Performans: Çok elemanda çok büyük blur düşük seviye mobilde maliyetli olabilir. Süslü glow'ları göndermeden önce gerçek cihazda test et.
Dark mode. Subtle koyu üzeri koyu gölgeler neredeyse kaybolur; karanlık temalarda parlak bir iç kenarlık veya açık tonlu bir gölge düşün.