Gradien CSS

Latar belakang gradien

Gradient CSS memungkinkan Anda menampilkan transisi yang lancar antara dua atau lebih warna yang disebutkan.

CSS mendefinisikan dua jenis gradient:

  • Gradient linear((ke bawah/ke atas/ke kiri/ke kanan/ diagonal))
  • Gradient radial((didefinisikan oleh pusatnya))

Gradient linear CSS

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

Syntax

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

Gradient linear - dari atas ke bawah (default)

Contoh di bawah menunjukkan gradient linear yang dimulai dari atas. Itu dimulai dari merah dan berubah menjadi kuning:

从上到下（默认）

Contoh

#grad {
  Dari atas ke bawah (default)
}

Coba Sendiri

background-image: linear-gradient(red, yellow);

Gradien linear - Dari kiri ke kanan

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

Contoh

#grad {
  Dari kiri ke kanan
}

Coba Sendiri

Gradien linear - Garis diagonal

Anda dapat mencapai 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, berubah menjadi kuning:

Kiri atas ke kanan bawah

Contoh

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

Coba Sendiri

Menggunakan sudut

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

180deg

Syntax

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);
}

Coba 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);
}

Coba 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); 
}

Coba Sendiri

Menggunakan kecerahan

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

Untuk menambahkan kecerahan, kami menggunakan fungsi rgba() untuk mendefinikan penanda warna. Parameter terakhir fungsi rgba() dapat berisi nilai 0 sampai 1, yang mendefiniskan kecerahan warna: 0 berarti transparen yang penuh, sementara 1 berarti warna penuh (tanpa transparen).

Contoh di bawah ini menunjukkan gradient linear yang mulai dari kiri. Itu mulai dengan transparen, lalu berubah menjadi merah penuh:

Contoh

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

Coba Sendiri

Gradient Linear Terulang

repeating-linear-gradient() Fungsi untuk gradient linear terulang:

Contoh

Gradient Linear Terulang:

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

Coba Sendiri