CSS box-shadow oluşturucu
Kaydırıcıları sürükleyin veya hazır değer seçin — gölgeyi canlı kartta görün ve box-shadow CSS'ini tek tıkla kopyalayın.
Hazır değerler
Katmanlar
0px
8px
24px
-8px
#000000
15%
Nasıl kullanılır
- Kartın üzerinde yumuşak bir gölge hazır — herhangi bir kaydırıcıyı (X/Y kaydırma, bulanıklık, yayılma) sürükleyin, renk ve opaklık seçin veya iç gölge için “İç gölge (inset)” kutusunu işaretleyin. Her şey canlı güncellenir, düğmeye basmanıza gerek yok.
- Hazır değer çiplerinden birine tıklayın (Yumuşak yüzen, Güçlü kaldırma, İç gölge, Neon ışıma, Çift, Neumorphism) — hazır bir görün anında yüklenir.
- Gölgeleri yığmak için “+” ile katman ekleyin; her katman bağımsız düzenlenir. Tam box-shadow tanımını tek tıkla kopyalayın.
Örnek
Hazır değer
Yumuşak yüzen
box-shadow CSS
box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15);
Doğrudan herhangi bir seçiciye yapıştırın, ör. .card { box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.15); }. “Çift” hazır değeri virgülle ayrılmış iki gölge üretir; “Neumorphism”in anlaşılması açık bir arka plan ister.
Kapsam, sınırlar ve sık sorulan sorular
- Yalnızca box-shadow: drop-shadow() filtresi yok, text-shadow yok ve CSS'de gradyanlı gölge yoktur — bunlar kapsam dışı.
- Renk seçiciden ve opaklık kaydırıcısından gelir; yapıştırılan CSS renk dizelerini ayrıştırmayız, bu yüzden yanlış yazılacak ya da yanlış okunacak bir şey yoktur.
- Neumorphism açık bir yüzeye bağlıdır — çok koyu arka planlarda etkisi görünmez olabilir. Bu stilin bir özelliğidir, hata değil.
- Hiçbir şey kaydedilmez veya bağlantıda parametreyle paylaşılmaz: sayfayı yenilerseniz varsayılan Yumuşak yüzen değerine dönersiniz. Her şey tarayıcınızda çalışır.
İlgili araçlar
Renk veya gölgelerle daha ileri gitmeniz gerektiğinde.