CSS Gradyan Oluşturucu
Gradyan türünü seçin, renk duraklarını sürükleyin ve CSS'i kopyalayın. Önizleme anında güncellenir, hiçbir veri sunucuya gitmez.
0%
100%
CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
Bu araç hakkında
CSS gradyanı, tarayıcının renk duraklarından çizdiği bir görüntüdür; dosya indirilmediği için her eleman boyutuna ölçeklenir. Doğrusal gradyan bir açı boyunca ilerler, radyal gradyan bir merkezden yayılır, konik gradyan ise merkezin çevresinde döner — halka grafikler ve renk çarkları için kullanışlıdır.
Durak konumları bu yol üzerindeki yüzdelerdir. Aynı konumdaki iki durak yumuşak geçiş yerine keskin bir sınır oluşturur; çizgili ve ikiye bölünmüş arka planlar böyle yapılır. 2016 sonrası tüm tarayıcılar üç işlevi de öneksiz destekler.
Sık sorulan sorular
- Açı değeri ne anlama geliyor?
- 0deg yukarıyı, 90deg sağı, 180deg aşağıyı gösterir. Bu, gradyanın ilerlediği yöndür; geldiği yön değildir.
- Yumuşak geçiş yerine keskin sınırı nasıl elde ederim?
- İki durağa aynı konumu verin, örneğin kırmızı %50 ve mavi %50. Renk o noktada geçişsiz değişir.
- Gradyanı metinde kullanabilir miyim?
- Evet: gradyanı background olarak verin, sonra aynı elemana background-clip: text ve color: transparent ekleyin.