Gangsa CSS

Latar belakang gradien

Peningkatan CSS memungkinkan Anda menampilkan transisi yang lancar antara dua atau lebih warna yang ditentukan.

CSS mendefinisikan dua jenis peningkatan:

  • Peningkatan linear((ke bawah/ke atas/ke kiri/ke kanan/geser))
  • Peningkatan radial((didefinisikan oleh pusatnya))

Peningkatan linear CSS

Untuk membuat peningkatan linear, Anda harus menentukan setidaknya dua referensi warna. Referensi warna adalah warna yang Anda ingin tampilkan transisi yang lancar. Anda juga dapat menetapkan titik awal dan arah (atau sudut) serta efek peningkatan.

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Peningkatan linear - dari atas ke bawah (default)

Contoh di bawah ini menunjukkan peningkatan linear dari atas ke bawah. Mulai dari merah, berubah menjadi kuning:

Dari atas ke bawah (default)}

Contoh

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

Cuba Sendiri

Gradien linear - Dari kiri ke kanan

Contoh di bawah ini menunjukkan gradien linear yang dimulai dari kiri. Itu dimulai dari merah, melalui warna-warna dan berubah menjadi kuning:

Dari kiri ke kanan

Contoh

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

Cuba Sendiri

Gradien linear - Garis diagonal

Anda dapat menciptakan gradien diagonal dengan menentukan posisi awal horizontal dan vertikal.

Contoh di bawah ini menunjukkan gradien linear yang dimulai dari pojok kiri atas (sampai pojok kanan bawah). Itu dimulai dari merah, melalui warna-warna dan berubah menjadi kuning:

Kiri atas ke kanan bawah

Contoh

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

Cuba Sendiri

Menggunakan sudut

Jika Anda ingin mengendalikan sudut gradien lebih banyak, Anda dapat menentukan sudut untuk menggantikan arah yang diatur sebelumnya (turun, naik, ke kanan, ke kiri, ke kanan bawah, dll). Nilai 0deg sama dengan naik (ke atas). Nilai 90deg sama dengan ke kanan (ke kanan). Nilai 180deg sama dengan turun (ke bawah).

180deg

语法

background-image: linear-gradient(angle, color-stop1, color-stop2);

Sudut ini menentukan sudut antara garis horizontal dan garis gradien.

Contoh di bawah ini menunjukkan bagaimana untuk menggunakan sudut dalam gradien linear:

Contoh

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

Cuba Sendiri

Menggunakan beberapa penanda warna

Contoh di bawah ini menunjukkan gradien linear dengan beberapa penanda warna (dari atas ke bawah):

Contoh

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

Cuba Sendiri

Contoh di bawah ini menunjukkan bagaimana untuk membuat gradien linear (dari kiri ke kanan) menggunakan warna sinar dan beberapa teks:

Latar belakang gradien

Contoh

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

Cuba Sendiri

Menggunakan kecerahan

CSS gradien juga mendukung kecerahan, dan dapat digunakan untuk menciptakan efek gradien.

Untuk menambahkan kecerahan, kami menggunakan fungsi rgba() untuk menentukan penanda warna. Parameter terakhir fungsi rgba() dapat berisi nilai antara 0 hingga 1, yang menentukan kecerahan warna: 0 untuk transparen total, 1 untuk warna penuh (tanpa transparen).

Contoh di bawah ini menunjukkan gradasi linear yang bermula dari kiri. Ia bermula sepenuhnya transparan, lalu melalui transisi kepada warna merah penuh:

Contoh

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

Cuba Sendiri

Gradasi linear berulang

repeating-linear-gradient() Fungsi untuk gradasi linear berulang:

Contoh

Gradasi linear berulang:

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

Cuba Sendiri