Fungsi linear-gradient

Fungsi linear-gradient menentukan gradien linear. Diterapkan pada properti yang menentukan gambar latar: background, background-image atau gambar batas: border-image, background-image-source.

Sintaksis

selektor {
	background: linear-gradient([sudut atau arah], warna1 ukuran1, warna2 ukuran2...);
}

Nilai

Nilai	Keterangan
arah	Menentukan arah tertentu dari gradien dalam satuan untuk sudut apa pun atau dengan kata kunci `top`, `left`, `right`, `bottom` atau kombinasinya: `top left`, `top right` dan sebagainya. Urutan kata tidak penting: bisa ditulis `top left` dan `left top`, tidak ada perbedaan. Parameter ini opsional: jika tidak ditulis, gradien akan berjalan dari atas ke bawah (seperti pada `to top`). Sebelum arah ditambahkan kata `to`.
sudut	Sudut dalam satuan untuk sudut apa pun. Dapat bernilai positif atau negatif. Parameter ini opsional. Secara bersamaan hanya dapat ditentukan sudut, atau arah (atau tidak ditulis sama sekali).
warna1	Warna awal gradien dalam satuan untuk warna apa pun.
warna2	Warna akhir gradien dalam satuan untuk warna apa pun.
ukuran	Menentukan panjang dari warna tertentu pada gradien dalam satuan untuk ukuran apa pun.

Contoh . Opsi paling sederhana

Sintaksis:

selektor {
	background: linear-gradient(warna awal, warna akhir);
}

Mari kita lihat contohnya:

<div id="elem"></div>

#elem {
	background: linear-gradient(black, red);
	width: 200px;
	height: 200px;
}

Contoh . Menambahkan sudut

Sintaksis:

selektor {
	background: linear-gradient(sudut, warna awal, warna akhir);
}

Mari kita lihat contohnya:

<div id="elem"></div>

#elem {
	background: linear-gradient(45deg, black, red);
	width: 200px;
	height: 200px;
}

Contoh . Menambahkan arah

Alih-alih sudut, dapat ditambahkan arah top, left, right, bottom atau kombinasinya: top left, top right Sebelum arah ditambahkan kata to.

Sintaksis:

selektor {
	background: linear-gradient(arah, warna awal, warna akhir);
}

Mari kita lihat contohnya:

<div id="elem"></div>

#elem {
	background: linear-gradient(to left, black, red);
	width: 200px;
	height: 200px;
}

Contoh . Menambahkan arah

Mari tentukan arah lain:

<div id="elem"></div>

#elem {
	background: linear-gradient(to top left, black, red);
	width: 200px;
	height: 200px;
}

Contoh . Menambahkan ukuran

Sintaksis:

selektor {
	background: linear-gradient(warna1 ukuran1, warna2 ukuran2);
}

Pada contoh berikut, perilakunya akan sebagai berikut: warna merah murni akan dari 0px hingga 30px, dari 30px hingga 50px akan ada gradien dari merah ke biru, dan dari 50px hingga akhir - biru murni:

<div id="elem"></div>

#elem {
	background: linear-gradient(red 30px, blue 50px);
	width: 200px;
	height: 200px;
}

Contoh . Menambahkan lebih dari `2` warna

Sintaksis:

selektor {
	background: linear-gradient(warna1 ukuran1, warna2 ukuran2, warna3 ukuran3...);
}

<div id="elem"></div>

#elem {
	background: linear-gradient(red 30px, blue 50px, green 70px);
	width: 200px;
	height: 200px;
}

Contoh . Transisi tajam

Pada contoh berikut, perilakunya akan sebagai berikut: warna merah murni akan dari 0px hingga 30px, biru murni - dari 30px hingga 60px, hijau murni - setelah 60px (red 0px boleh tidak ditulis):

<div id="elem"></div>

#elem {
	background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
	width: 200px;
	height: 200px;
}

Contoh . Ukuran juga dapat ditentukan dalam persentase

Pada contoh berikut, perilakunya akan sebagai berikut: warna merah murni akan dari 0% hingga 30%, biru murni - dari 30% hingga 60%, hijau murni - setelah 60% (red 0% boleh tidak ditulis):

<div id="elem"></div>

#elem {
	background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
	width: 200px;
	height: 200px;
}

Contoh . Kombinasi dengan background-size

Pada contoh berikut, perilakunya akan sebagai berikut: warna merah murni akan dari 0px hingga 30px, biru murni - dari 30px hingga 60px, di mana semua ini akan berulang berupa potongan-potongan sebesar 60px (karena background-size: 60px;):

<div id="elem"></div>

#elem {
	background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
	background-size: 60px 60px;
	width: 200px;
	height: 200px;
}

Lihat juga

fungsi radial-gradient,
yang membuat gradien radial
fungsi repeating-linear-gradient,
yang membuat gradien linear berulang
fungsi repeating-radial-gradient,
yang membuat gradien radial berulang

Fungsi linear-gradient

Sintaksis

Nilai

Contoh . Opsi paling sederhana

Contoh . Menambahkan sudut

Contoh . Menambahkan arah

Contoh . Menambahkan arah

Contoh . Menambahkan ukuran

Contoh . Menambahkan lebih dari 2 warna

Contoh . Transisi tajam

Contoh . Ukuran juga dapat ditentukan dalam persentase

Contoh . Kombinasi dengan background-size

Lihat juga

Contoh . Menambahkan lebih dari `2` warna