Bu araç ne yapar
CSS Gradyan Oluşturucu, iki renkli bir gradyan tasarlamanıza yardımcı olur ve projenize yapıştırmanız için tam CSS kodunu verir. Bir açılış sayfası, düğme, kart veya hero bölümü oluşturan ve sözdizimini elle yazmadan temiz bir arka plan isteyen frontend geliştiriciler, tasarımcılar ve herkes için kullanışlıdır. Ayarlarken sonucu görürsünüz, böylece son gradyanın nasıl görüneceği konusunda tahmin yapmanıza gerek kalmaz.
Nasıl kullanılır
- Renklerin nasıl harmanlanacağını belirlemek için gradyan türünü, doğrusal veya radyal, seçin.
- Doğrusal bir gradyanın yönünü döndürmek için açı kaydırıcısını sürükleyin.
- Renk seçici ile ilk renginizi belirleyin.
- İkinci renk seçici ile ikinci renginizi belirleyin.
- Herhangi bir kontrolü değiştirdiğinizde canlı önizlemenin ve CSS kodunun anında güncellendiğini izleyin.
- Oluşturulan kuralı, örneğin background: linear-gradient(…) satırını, kopyalayın ve stil sayfanıza yapıştırın.
Hızlı bir örnek
Türü doğrusal olarak ayarlayın, açıyı 90 dereceye sürükleyin, ardından koyu bir mor ve yumuşak bir mavi seçin. Önizleme soldan sağa bir geçiş gösterir ve kod size background: linear-gradient(90deg, #7c3aed, #60a5fa) gibi bir şey verir. Bunu bir düğmeye veya bölüme yapıştırın, işiniz bitti. Bir gradyan yassı görünüyorsa, daha fazla kontrast için renk tekerleğinde birbirinden daha uzak iki renk seçmeyi deneyin.
Her şey doğrudan tarayıcınızda çalışır, bu nedenle renkleriniz gizli kalır, hiçbir şey yüklenmez ve araç kayıt gerektirmeden tamamen ücretsizdir.
Sıkça sorulan sorular
- Doğrusal ve radyal gradyan arasındaki fark nedir?
- Doğrusal gradyan renkleri belirlediğiniz açıyla düz bir çizgi boyunca harmanlarken, radyal gradyan renkleri bir merkez noktadan dışa doğru yayar. Önizlemede her birinin nasıl güncellendiğini görmek için türü değiştirin.
- Açı kaydırıcısı radyal gradyanlarda çalışır mı?
- Açı kaydırıcısı doğrusal bir gradyanın yönünü kontrol eder. Radyal gradyanlarda renkler merkezden yayıldığı için açının görünür bir etkisi yoktur, ancak iki renk seçici yine de geçerlidir.
- Oluşturulan CSS kodunu projemde nasıl kullanırım?
- Oluşturulan kuralı kopyalayın ve istediğiniz öğede stil sayfanıza yapıştırın, örneğin bir background özelliği olarak. Ek kütüphane veya içeri aktarma gerekmez.