Fungsi CSS linear-gradient()

Definisi dan penggunaan

CSS linear-gradient() Fungsi digunakan untuk membuat transisi linear sebagai latar belakang.

Untuk membuat transisi linear, Anda harus mendefinisikan setidaknya dua tanda warna. Tanda warna adalah warna yang Anda inginkan untuk terjadi transisi merata diantara mereka. Anda juga dapat menetapkan titik awal dan arah (atau sudut) serta efek transisi.

Contoh transisi linear:

Contoh

Contoh 1

Transisi linear ini dimulai dari atas. Ia berubah dari merah ke kuning, lalu ke biru:

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

Coba sendiri

Contoh 2

Sebuah transisi linear yang dimulai dari kiri. Ia berubah dari merah ke biru:

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

Coba sendiri

Contoh 3

Sebuah transisi linear yang dimulai dari pojok kiri atas (dan meluas ke pojok kanan bawah):

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

Coba sendiri

Contoh 4

Sebuah transisi linear yang ditentukan sudut:

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

Coba sendiri

Contoh 5

Sebuah transisi linear yang mengandung beberapa tanda warna:

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

Coba sendiri

Contoh 6

Linear gradient yang memiliki dua tanda warna posisi:

#grad {
  background: linear-gradient(
    ke kanan,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

Coba sendiri

Contoh 7

Linear gradient yang memiliki kekhasan transparensi:

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

Coba sendiri

Syarat CSS

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

Rincian teknologi

Dukungan pereka

Angka dalam tabel menunjukkan versi perekenan pertama yang mendukung fungsi ini.

Halaman yang relevan

Tutorial:Gradient CSS

Rujukan：Atribut background-image CSS

Rujukan：Fungsi conic-gradient() CSS

Rujukan：Fungsi radial-gradient() CSS

Rujukan：Fungsi repeating-conic-gradient() CSS

Rujukan：Fungsi repeating-linear-gradient() CSS

Rujukan：Fungsi repeating-radial-gradient() CSS