CSS arka plan gradyanları, web sitelerindeki arka planlara eklenen renk geçişleridir. Bir renkten diğerine yumuşak bir geçiş sağlarlar ve genellikle bir tasarımın görsel çekiciliğini artırmak için kullanılırlar. Aşağıda 20 şık CSS arka plan gradyan örneği verilmiştir:
Siyah ve Beyaz Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(45deg, black, white);
Gökkuşağı Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
Turuncu-Mor Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #FF6B6B, #8E54E9);
Pastel Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #B8E994, #A6C0FE, #F6B8C6);
Mavi-Gri Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #5D646B, #7D828A, #B7C3F3);
Koyu Renkli Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #4B4B4B, #2B2B2B);
Mor ve Turuncu Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #FBAB7E, #F7CE68);
Deniz Mavisi Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #85D8CE, #085078);
Yeşil ve Sarı Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #7FFF00, #FFD700);
Turuncu-Kırmızı Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #FF416C, #FF4B2B);
Sarı-Pembe Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #FCE38A, #F38181);
Mor-Yeşil Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #6A11CB, #2575FC, #1AD9E7);
Pembe-Mavi Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #614385, #516395, #4A6EA9);
Sarı-Turuncu Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #FFD300, #FFA200);
Mavi-Mor Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #643173, #7B1FA2, #9C27B0);
Turuncu-Gri Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #E97F4D, #7F7F7F);
Sıcak Renkli Arka Plan Gradyanı:
css
Copy code
background: linear-gradient(to right, #FFC371, #FF5F6D);