CSS linear-gradient() fonksiyonu

Önceki Sayfa CSS light-dark() fonksiyonu
Sonraki Sayfa CSS log() fonksiyonu
Üst Katmana Dön CSS Fonksiyon Referans Kılavuzu

Tanım ve Kullanım

CSS linear-gradient() Fonksiyon, arka plan olarak lineer geçiş oluşturmak için kullanılır.

Lineer geçiş oluşturmak için en az iki renk işareti tanımlamanız gerekir. Renk işaretleri, aralarında pürüzsüz geçiş sağlamak istediğiniz renklerdir. Ayrıca, başlangıç noktasını ve yönelimi (veya açıyı) ve geçiş etkisini ayarlayabilirsiniz.

Lineer geçiş örneği:

Örnek

Örnek 1

Bu lineer geçiş üstten başlar. Kırmızıdan sarıya, ardından maviye geçiş yapar:

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

Deneyin

Örnek 2

Soldan başlayan lineer geçiş. Kırmızıdan maviye geçiş yapar:

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

Deneyin

Örnek 3

Sol üst köşeden başlayan (ve sağ alt köşeye uzanan) lineer geçiş:

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

Deneyin

Örnek 4

Bir açı belirtilmiş lineer geçiş:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

Deneyin

Örnek 5

Birden fazla renk işareti içeren lineer geçiş:

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Deneyin

Örnek 6

İki konumlu renk etiketi içeren bir lineer eğrilik:

#grad {
  background: linear-gradient(
    sağa doğru,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

Deneyin

Örnek 7

Şeffaflık içeren bir lineer eğrilik:

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

Deneyin

CSS grameri

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

Değer	Açıklama
side-or-corner	İsteğe bağlı. Eğrilik başlangıcı. 'to' anahtar kelimesi ile başlar ve ardından en fazla iki diğer anahtar kelime gelir: left veya right top veya bottom Öntanımlı değeri aşağıya doğru (aşağıya doğru)dır.
angle	İsteğe bağlı. Eğrilik çizgisinin yön açısı: 0deg eşittir: yukarıya doğru (yukarıya doğru) 180deg eşittir: aşağıya doğru (aşağıya doğru) 270deg eşittir: sola doğru (sola doğru) 90deg eşittir: sağa doğru (sağa doğru)
color-stop1, color-stop2,...	Gerekli. Renk etiketi, aralarında yumuşak geçiş gerçekleştirmek istediğiniz renklerdir. Bu değer, bir renk değeri içerir ve ardından seçmeli olarak bir veya iki konumun renk etiketi (0% ile 100% arasında olan bir yüzdelik veya gradyan ekseninin uzunluğunda) gelir.

Değer

Açıklama

side-or-corner

İsteğe bağlı. Eğrilik başlangıcı. 'to' anahtar kelimesi ile başlar ve ardından en fazla iki diğer anahtar kelime gelir:

left veya right
top veya bottom

Öntanımlı değeri aşağıya doğru (aşağıya doğru)dır.

angle

İsteğe bağlı. Eğrilik çizgisinin yön açısı:

0deg eşittir: yukarıya doğru (yukarıya doğru)
180deg eşittir: aşağıya doğru (aşağıya doğru)
270deg eşittir: sola doğru (sola doğru)
90deg eşittir: sağa doğru (sağa doğru)

color-stop1, color-stop2,...

Gerekli. Renk etiketi, aralarında yumuşak geçiş gerçekleştirmek istediğiniz renklerdir.

Bu değer, bir renk değeri içerir ve ardından seçmeli olarak bir veya iki konumun renk etiketi (0% ile 100% arasında olan bir yüzdelik veya gradyan ekseninin uzunluğunda) gelir.