CSS gölgelerini görsel olarak tasarlayın
Gölgeler arayüzlere derinlik katar: Kartları sayfadan öne çıkarır, hangi butona basıldığını gösterir ve açılır pencereleri arka plandan ayırır. CSS box-shadow özelliği çok güçlüdür ancak aldığı beş değeri ezbere ayarlamak zordur. Bu araç, kaydırıcılar ve canlı önizleme ile doğal bir görünüm için birden fazla gölgeyi üst üste eklemenizi sağlar. Projenize doğrudan kopyalayıp yapıştırabileceğiniz temiz bir CSS kodu üretir.
Özellikler
- Anında önizleme ile konum, bulanıklık, yayılma, renk ve opaklık kontrolleri.
- Tek bir
box-shadowbildiriminde birleştirilmiş beş katmana kadar gölge. - Basılı ve içe çökük efektler için iç gölgeler (inset).
- Tasarımınıza uyum sağlaması için köşe kavisleri ve önizleme renkleri.
- Yumuşak, orta, sert, katmanlı, iç ve parlama (glow) gölgeleri için hazır ayarlar.
rgba()formatında renklerle kopyalamaya hazır CSS.
Örnek
Açık renkli arka planlarda doğal görünen katmanlı bir gölge:
.card {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
0px 4px 8px 0px rgba(0, 0, 0, 0.07),
0px 16px 32px 0px rgba(0, 0, 0, 0.07);
border-radius: 16px;
}
Gölge tasarım ipuçları
| Amaç | Önerilen ayarlar |
|---|---|
| Beyaz zemin üzerinde hafif bir kart | y 4, bulanıklık 12, opaklık %8 |
| Yüzen açılır menü veya pencere | 2–3 katman, y en fazla 24, bulanıklık en fazla 48, her biri için opaklık %7–12 |
| Retro "düz" görünüm | x 6, y 6, bulanıklık 0, opaklık %100 |
| Odak (focus) veya parlama efekti | x 0, y 0, bulanıklık 16–24, yayılma 2–4, marka rengi |
| Basılı form alanı | iç gölge (inset), y 2, bulanıklık 6, opaklık %25–30 |
Işık kaynağını tutarlı tutun: Gölgeler bir bileşende aşağı doğru düşüyorsa, arayüzdeki her yerde aşağı doğru düşmelidir.
İlgili araçlar
CSS Gradyan Oluşturucu ile kartlarınızın arka planını oluşturun, Renk Dönüştürücü ile renkleri HEX, RGB ve HSL arasında dönüştürün veya Görselden Renk Seçici ile bir ekran görüntüsünden renk seçin.