Fungsi CSS linear-gradient()

Definisi dan penggunaan

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

Untuk membuat transisi garis linear, harus ditentukan setidaknya dua penanda warna. Penanda warna adalah warna yang ingin Anda lakukan transisi lancar diantara mereka. Anda juga dapat menentukan titik awal dan arah (atau sudut) serta efek transisi.

Contoh transisi garis linear:

Contoh

Contoh 1

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

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

Coba sendiri

Contoh 2

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

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

Coba sendiri

Contoh 3

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

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

Coba sendiri

Contoh 4

Sebuah transisi garis linear yang ditentukan sudutnya:

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

Coba sendiri

Contoh 5

Sebuah transisi garis linear yang mengandung beberapa penanda warna:

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

Coba sendiri

Contoh 6

Gradien linear dengan dua penanda warna lokasi:

#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

Gradien linear dengan transparansi:

#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, ...);

Detil teknis

Dukungan browser

Angka di tabel menunjukkan versi browser yang sepenuhnya mendukung fungsi ini.

Halaman yang berhubungan

Tutorial:Gradien CSS

Referensi：Atribut properti background-image CSS

Referensi：Fungsi conic-gradient() CSS

Referensi：Fungsi radial-gradient() CSS

Referensi：Fungsi repeating-conic-gradient() CSS

Referensi：Fungsi repeating-linear-gradient() CSS

Referensi：Fungsi repeating-radial-gradient() CSS