# CSS gölgelerini değerleri tahmin etmek yerine görsel olarak tasarlayın
box-shadow'u elle ayarlamak sıkıcıdır. Bu görsel oluşturucu, birden fazla gölgeyi istiflemenizi, canlı görmenizi ve üretime hazır CSS kopyalamanızı sağlar. 5 Öğe başına gölge katmanı
Canlı Her değişiklikte önizleme
5 Hızlı hazır ayarlar
# Gerçekçi derinlik için birden fazla gölge istifleyin
Gerçek gölgeler nadiren tekdüze bulanıklıktır. Öğeye yakın sıkı bir gölgeyi daha yumuşak, daha geniş bir gölgeyle istiflemek doğal derinlik oluşturur. Katman eklemek için + kullanın.# Her CSS kontrolünü anlama
| Kontrol | CSS Değeri | Etki |
|---|---|---|
| Ofset X | 1. uzunluk | Yatay kaydırma. |
| Ofset Y | 2. uzunluk | Dikey kaydırma. |
| Bulanıklık | 3. uzunluk | Bulanıklık yarıçapı. |
| Yayılma | 4. uzunluk | Gölgeyi büyütür veya küçültür. |
| Renk & Opaklık | rgba() | Bağımsız opaklıklı gölge rengi. |
| İç | inset | Öğe kenarının içinde gölge. |
Sade bir arka plan ızgarası kullanın
Önizleme alanındaki noktalı ızgara gölgenin ne kadar yayıldığını gösterir. Negatif spread, gölgeyi öğeye daha yakın tutar.Önerilen İş Akışı
Bir hazır ayarla başlayın.
Gerçekçi derinlik için katman ekleyin.
Yüzen kart efekti için negatif spread kullanın.
Oluşturulan CSS'i kopyalayıp yapıştırın.