CSS'de Renk Geçişleri (Gradients) iki veya daha fazla renkler arasında yumuşak geçişler ile görüntü elde etmemize olanak sağlar.

CSS'de, 3 tür Gradients tanımlaması yapılabilir.:

  • Linear Gradients (Doğrusal Gradyanlar) : aşağı/yukarı/sola/sağa/çapraz olarak gider.
  • Radial Gradients (Radyal Gradyanlar) : merkezlerine göre tanımlanır
  • Conic Gradients (Konik Gradyanlar) : bir merkez noktası etrafında döndürülür

CSS Linear Gradients Kullanımı

CSS'de Linear bir gradients yani doğrusal bir renk geçişi oluşturmak için en az iki renge ihtiyaç vardır. Renklerle beraber, oluşacak olan renk geçişinin yönünüde ayarlayabilirsiniz.

Linear Gradients Syntax (Sözdizimi)

background-image: linear-gradient(yön, renk1, renk2, ...);

Yukarıdan Aşağıya Renk Geçişi (Varsayılan)

Aşağıdaki örnek, yukarıdan aşağıya doğru renk geçişini temsil etmektedir. Renkler kırmızı ile başlar ve sonrasında sarıya döner.

#box{
background-image: linear-gradient(red, yellow);
}

Soldan Sağa Doğru Renk Geçişi

Aşağıdaki örnek, soldan sağa doğru renk geçişini temsil etmektedir. Renkler kırmızı ile başlar ve sonrasında sarıya döner. CSS'deki linear-gradient özelliğinin ilk parametresine "to right" yazarak elde edilir.

#box{
background-image: linear-gradient(to right, red , yellow);
}

Çapraz Renk Geçişi

Hem yatay hem de dikey başlangıç konumlarını belirterek çapraz olarak bir renk geçişi oluşturabiliriz.

Aşağıdaki örnek, sol üstten başlayan (ve sağ alta giden) doğrusal bir renk geçişini temsil etmektedir. Renkler kırmızı ile başlar ve sonrasında sarıya döner.

#box{
background-image: linear-gradient(to bottom right, red, yellow);
}

Açıları Kullanarak Renk Geçişi Tanımlamak

Renk geçişlerinde daha fazla kontrol istiyorsanız, önceden tanımlanmış yönler yerine açılarlada renk geçişi sağlayabilirsiniz. Deg birimi açıyı temsil etmektedir :

  • 0deg değeri "top" değerine eşittir
  • 90deg değeri "right" değerine eşittir.
  • 180deg değeri ise "bottom" değerine eşittir.
#box{
background-image: linear-gradient(180deg, red, yellow);
}

Çoklu Renkler Kullanarak Renk Geçişi Yapmak

Linear bir renk geçişi sağlamak için en az iki renge ihitiyacımız olduğundan bahsetmiştik. İkiden fazla renk kullanarakta linear renk geçişi sağlayabiliriz. Aşağıdaki örnek, birden çok renge sahip doğrusal bir renk geçişini (yukarıdan aşağıya) göstermektedir:

#box{
background-image: linear-gradient(red, green, blue);
}

Renk Geçişlerinde Transparan Uygulamak

CSS'deki gradient özellikleri, solma efektleri oluşturmak için kullanılabilecek şeffaflığı da destekler.

Saydamlık eklemek için renkleri tanımlarken rgba() işlevini kullanırız. rgba() işlevindeki son parametre 0 ile 1 arasında bir değer olabilir ve rengin şeffaflığını tanımlar: 0 tam şeffaflığı gösterir, 1 tam rengi gösterir (saydamlık yok).

Aşağıdaki örnek, soldan başlayan doğrusal bir gradyanı göstermektedir. Tamamen şeffaf başlar, kırmızıya geçer:

#box{
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Tekrarlanan Doğrusal Renk Geçişi

CSS'de repeating-linear-gradient() özelliği, doğrusal renk geçişlerinde tekrar oluşturmak için kullanılır:

#box {
background-image: repeating-linear-gradient(red, yellow 10%, blue 20%);
}

CSS Radial Gradients Kullanımı

CSS'de Radyal bir renk geçişi, merkezi tarafından tanımlanır.

Radyal bir renk geçişi oluşturmak için ayrıca en az iki renge ihtiyaç vardır.

Radial Gradients Syntax (Sözdizimi)

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Varsayılan olarak geçiş şekli elipstir, boyut ise en uzak köşedir ve geçiş konumu merkezdir.

Eşit Aralıklı Renk Geçişleri(Varsayılan)

Aşağıdaki örnek, eşit aralıklı renklere sahip bir radyal renk geçişini gösterir:

#box{
background-image: radial-gradient(red, green, blue);
}

Farklı Aralıklı Renk Geçişleri

Aşağıdaki örnek, farklı aralıklı renklere sahip bir radyal renk geçişini gösterir:

#box{
background-image: radial-gradient(red 5%, blue 15%, green 60%);
}

Farklı Şekiller ile Renk Geçişi Oluşturma

CSS'de radial-gradient özelliğinin ilk parametresi , oluşacak renk geçişinin şeklini tanımlar. Şekil parametresi çember (circle) veya elips (ellipse) alabilir. Varsayılan değer elipstir.

Aşağıdaki örnek, daire şeklinde bir radyal renk geçişini göstermektedir:

#box{
background-image: radial-gradient(circle, red, blue, green);
}

Radial Gradients Boyut Kullanımları

size parametresi, renk geçişinin boyutunu tanımlar. Dört değer alabilir:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Tekrarlanan Radial Renk Geçişi

CSS'de repeating-radial-gradient() özelliği, doğrusal renk geçişlerinde tekrar oluşturmak için kullanılır:

#box{
background-image: repeating-radial-gradient(red, blue 10%, green 15%);
}

CSS Conic Gradients Kullanımı

CSS'de Conic Gradients, renk geçişlerinin bir merkez noktası etrafında döndürüldüğü bir renk geçişidir.

Konik bir renk geçişi oluşturmak için en az iki renk tanımlamanız gerekir.

background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);

Varsayılan olarak açı 0 derecedir ve konum merkezdir.

Derece belirtilmezse renkler orta noktanın etrafına eşit olarak yayılır.

3 Renkli Konik Renk Geçişi

Aşağıdaki örnek, üç renkli bir konik renk geçişini göstermektedir:

#box{
background-image: conic-gradient(red, blue, green);
}

3 Renkli ve Açılarak Kullanılarak Renk Geçişi

Aşağıdaki örnek, üç renk ve her renk için bir derece içeren bir konik renk geçişini gösterir:

 
 
 
 
#box{
background-image: conic-gradient(red 45deg, blue90deg, green 210deg);
}