Hafif renkli bir parıltıyla yumuşak bir gölge
Katman 1: 0px 4px 12px rgba(0,0,0,0.25) · Katman 2: 0px 0px 24px rgba(99,102,241,0.3)
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.25), 0px 0px 24px 0px rgba(99,102,241,0.3);
CSS Gradient ve Gölge Oluşturucu
Doğrusal veya radyal bir gradient, ya da çok katmanlı bir box-shadow oluşturun, canlı önizleme ve kopyalanabilir CSS ile.
90°
0%
100%
CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
Bu araç işinize yaradı mı?
Bu araç hakkında
Gradient ve box-shadow sözdizimini neredeyse doğru yapmak kolay, sayıları düzenleyip bir tarayıcıda tekrar tekrar kontrol ederek ince ayar yapmak yorucudur — bu araç her kontrolün yanına canlı bir önizleme koyar, bu yüzden CSS herhangi bir yere kopyalanmadan önce doğrudur.
Nasıl kullanılır
- Gradient sekmesi: doğrusal veya radyal seçin, açıyı ayarlayın (doğrusal için) ve renk duraklarını ekleyin, kaldırın veya yeniden konumlandırın.
- Gölge sekmesi: her katmanın ofsetini, bulanıklığını, yayılımını ve rengini ayarlayın, daha zengin bir gölge için birden fazla katmanı üst üste koyun.
- Üretilen CSS'i her iki sekmeden de kopyalayın.
Örnekler
Sık karşılaşılan sorunlar
- Radyal bir gradient başka bir yerdeki gibi ortalanmış görünmüyor.
- Bu araç, elemanın merkezinden basit, dairesel bir radyal gradient üretir — CSS radial-gradient, bu aracın arayüzünün sunduğundan çok daha fazla şekil ve konum seçeneği destekler (elips, kaydırılmış bir merkez, açık boyutlandırma); bunlar için üretilen CSS'i elle düzenleyin.