CSS Gradyan Rehberi: Doğrusal, Dairesel ve Konik Renk Geçişleri

Renk geçişleri (gradyanlar), düz renklerin yerine derinlik ve hareket hissi katmak için web sitelerinde, uygulama arayüzlerinde ve sosyal medya görsellerinde sıkça kullanılır. CSS'te gradyanlar birer görsel gibi davranır; bu yüzden background veya background-image özelliğiyle uygulanır.

Doğrusal gradyan

En sık kullanılan türdür. Renkler bir doğru boyunca geçiş yapar:

• linear-gradient(90deg, #5b7cff, #ff8a5b) soldan sağa geçiş.
• linear-gradient(135deg, ...) sol üstten sağ alta çapraz geçiş.
• Açı yerine to right veya to bottom right gibi yön ifadeleri de kullanılabilir.

Dairesel ve konik gradyan

• Dairesel (radial-gradient): Renkler bir merkezden dışarı doğru yayılır. Işık efektleri ve vurgu alanları için uygundur.
• Konik (conic-gradient): Renkler bir merkez etrafında döner. Pasta grafikleri ve renk çemberleri için kullanılır.

Renk durakları

Her rengin geçişteki konumu yüzde olarak belirtilebilir. Örneğin linear-gradient(90deg, #5b7cff 0%, #b45bff 50%, #ff8a5b 100%) üç renkli eşit bir geçiş oluşturur. İki durağı aynı konuma koymak, yumuşak geçiş yerine keskin bir sınır yaratır; bu teknik şerit desenleri için kullanılır.

Grileşen ara tonlardan kaçınmak

Renk çemberinde birbirine uzak iki rengi (ör. mavi ve turuncu) doğrudan geçirince, ortada soluk ve gri bir bölge oluşabilir. Bunu önlemek için:

• İki rengin arasına daha canlı bir ara renk ekleyin.
• Birbirine daha yakın tonlar seçin.
• Güncel tarayıcılarda geçişin OKLCH gibi algısal bir renk uzayında hesaplanmasını isteyebilirsiniz (linear-gradient(in oklch, ...)).

Okunabilirlik

Gradyan üzerine yazı koyuyorsanız, yazının hem en açık hem en koyu bölgede okunur olduğundan emin olun. Kontrastı her iki uçta da kontrol etmek gerekir.

CSS Gradyan Oluşturucu ile doğrusal, dairesel ve konik gradyanları en fazla 6 renk durağıyla oluşturabilir, CSS kodunu kopyalayabilir ya da gradyanı PNG ve SVG arka plan olarak indirebilirsiniz.