Blog

CSS Gradients - Membuat Gradasi Warna Dengan CSS

 

CSS Gradients - Membuat Gradasi Warna Dengan CSS

CSS     1 week ago


Gradien CSS memungkinkan Anda menampilkan transisi yang mulus antara dua atau lebih warna yang diinginkan.

CSS memiliki dua jenis gradien:

  • Linear Gradients (turun / naik / kiri / kanan / diagonal)
  • Radial Gradien (ditentukan oleh pusat mereka)

CSS Linear Gradients

Untuk membuat gradien linier Anda harus menentukan setidaknya dua warna. Anda juga dapat mengatur titik awal dan arah (atau sudut) bersama dengan efek gradien.

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

Linear Gradient - dari atas ke bawah (default gradient). Contoh berikut menunjukkan gradien linier yang dimulai di bagian atas. Mulai merah, transisi ke kuning:

.kotak {
    background: linear-gradient(red, yellow);
}

Linear Gradient - Kiri ke Kanan. Contoh berikut menunjukkan gradien linier yang dimulai dari kiri. Mulai merah, transisi ke kuning:

.kotak {
    background: linear-gradient(to right, red , yellow);
}

Menggunakan Sudut. Jika Anda ingin lebih mengontrol arah gradien, Anda dapat menentukan sudut, bukan arah yang telah ditentukan (ke bawah, ke atas, ke kanan, ke kiri, ke kanan bawah, dll.).

.kotak {
  background: linear-gradient(-90deg, red, yellow);
}

Gradien juga bisa digunakan lebih dari 2 warna, misalnya seperti ini.

.kotak {
  background: linear-gradient(red, yellow, green);
}

atau 

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

Kita juga bisa memasang transparan pada gradien seperti contoh dibawah:

.kotak {
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Kita bisa juga me-repeat gradien dengan menggunakan function repeating-linear-gradient().

.kotak {
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS Radial Gradients

Sebuah gradien radial didefinisikan oleh pusatnya.

Untuk membuat gradien radial Anda juga harus menentukan setidaknya dua warna.

background: radial-gradient(shape size at position, start-color, ..., last-color);

Secara default, bentuknya elips, ukuran paling ujung, dan posisinya pusat.

Radial Gradient - Perataan Warna Spasi yang Merata (ini default)

Contoh berikut menunjukkan gradien radial dengan berhenti warna yang berjarak sama:

.kotak {
  background: radial-gradient(red, yellow, green);
}

Radial Gradient - Perbedaan Warna yang Berbeda

Contoh berikut menunjukkan gradien radial dengan warna berhenti berbeda spasi:

.kotak {
  background: radial-gradient(red 5%, yellow 15%, green 60%);
}

Set Shape

Parameter bentuk menentukan bentuk. Ini bisa mengambil lingkaran nilai atau elips. Nilai standarnya adalah elips.

Contoh berikut menunjukkan gradien radial dengan bentuk lingkaran:

.kotak {
  background: radial-gradient(circle, red, yellow, green);
}

Menggunakan Kata Kunci Untuk Ukuran yang Berbeda

Penggunaan Kata Kunci Ukuran Berbeda. Parameter ukuran menentukan ukuran gradien. Ini dapat mengambil empat nilai:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Contoh Gradien radial dengan kata kunci ukuran berbeda:

.kotak1 {
  background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

.kotak2 {
  background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

Repeat radial-gradient

Fungsi ulangi-radial-gradien () digunakan untuk mengulang gradien radial:

Contoh radial gradient:

.kotak {
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}