Gradyan oluşturucu
Tamamen tarayıcınızda çalışır. Dosyalarınız ve verileriniz cihazınızdan hiç çıkmaz.
Bu araç hakkında
Gradyan oluşturucu, açıları ve durak konumlarını tahmin etmek yerine bir CSS gradyanını gözle kurmanızı sağlar. Doğrusal, dairesel veya konik seçin, renk duraklarını ekleyin ya da kaldırın, her durağın rengini ve konumunu ayarlayın. Büyük önizleme kutusu anında güncellenir.
Üç gradyan türü arasındaki fark ne?
Doğrusal gradyan renkleri düz bir çizgi boyunca karıştırır, yönünü bir açı kaydırıcısıyla belirlersiniz: 90 derece soldan sağa, 180 derece yukarıdan aşağıya gider. Dairesel gradyan bir merkez noktadan dışa doğru karışır; burada daire (her yönde eşit yayılım) ile elips (şeklin kutusuna göre uzatılmış) arasında seçim yaparsınız. Konik gradyan renkleri bir renk çarkı veya pasta grafiği gibi merkez etrafında döndürür, o da taramanın nereden başlayacağını belirleyen bir açı alır. Her tür istediğiniz sayıda renk durağı kabul eder, her durağın hem bir rengi hem de yüzde 0 ile 100 arasında bir konumu vardır, yani birkaç rengi yan yana sıkıştırabilir ya da eşit aralıklarla yayabilirsiniz.
Sıfırdan başlamak yerine hazır bir görünümle mi başlayabilirim?
Evet. Araç, sıcak renkli iki tonlu “Sunset” doğrusal gradyanı, dairesel “Deep Space” karışımı ve tam bir “Rainbow Wheel” konik gradyanı gibi birkaç hazır ayarla geliyor; birini seçtiğinizde düzenleyiciye yüklenir ve boş bir sayfa yerine oradan başlayıp renkleri, durakları veya açıyı değiştirebilirsiniz. Ne oluşturursanız oluşturun, çıktı satırı elle yazacağınız CSS’in aynısıdır; örneğin linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%). Doğrudan bir stil dosyasına yapıştırabilirsiniz.
Tasarladığım herhangi bir şey bir yere yükleniyor mu?
Hayır. Gradyanı oluşturmak ve önizlemek tamamen tarayıcınızda gerçekleşir, yani tasarladığınız hiçbir şey makinenizden çıkmaz. Bu sayede bir müşterinin marka gradyanını veya henüz yayınlanmamış bir ürünün arka planını denemekte sakınca yok.
Bir hero bölümü için background: linear-gradient(...) satırını almak, bir kartın arkasına dairesel bir parıltı koymak veya bir ilerleme halkası ya da renk çarkı için konik bir gradyan tasarlamak için kullanın. linear-gradient(), radial-gradient() ve conic-gradient() sözdiziminin tamamı için MDN’nin gradyan referansına bakabilirsiniz.