Belajar membuat gradient pada CSS

Properti gradient pada CSS digunakan untuk membuat transisi yang halus antara dua atau lebih warna. G

Kegunaan CSS gradient

Pada CSS3 terdapat fitur baru yaitu gradient. Ini digunakan untuk membuat transisi yang halus antara dua atau lebih warna. Elemen yang diberi style gradient bisa diatur ke arah yang di inginkan, dan dengan menggunakan gradient output yang dihasilkan akan lebih cepat karena browser hanya memainkan warna bukan gambar. Gradien sendiri terdapat dua jenis, yaitu: linear dan radial.

Membuat linear-gradient CSS

Untuk membuat gradient pada CSS, Anda harus menentukan setidaknya dua pemberhentian warna, yang dimaksud dengan pemberhentian warna ialah memilih warna yang Anda inginkan untuk dibuat transisi warna yang halus. Anda juga bisa mengatur posisi titik awal dan arah sudut dimana gradient ditetapkan.

Syntax linear-gradient:

background-image: linear-gradient( direction, color-stop1, color-stop2, … );
direction
Menentukan arah warna, contoh: “to right” ini membuat gradient dimulai dibagian kiri lalu ke kanan
color-stop1
Menentukan warna pertama
Color-stop2
Menentukan warna kedua
Informasi: Ada browser versi lama yang tidak mendukung gradient, sebagai fallbacknya digantikan dengan warna background-color.

Linear-gradient top to bottom

Contoh berikut membuat linear-gradient dimulai di bagian atas lalu ke bawah dan ini adalah default. Dimulai dari warna hijau lalu transisi ke kuning:

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

Linear-gradient left to right

Contoh berikut membuat linear-gradient dimulai di bagian kiri lalu ke kanan. Dimulai dari warna hijau lalu transisi ke kuning:

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

Linear-gradient diagonal

Anda bisa membuat gradient diagonal dengan menetapkan kedua posisi awal horizontal dan vertikal.

Contoh berikut membuat linear-gradient dimulai di bagian atas kiri lalu ke kanan bawah. Dimulai dari warna hijau lalu transisi ke kuning:

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

Mengatur arah linear-gradient

Anda bisa mengontrol arah sudut gradient, Sudut 0deg menciptakan gradient dari bawah ke atas dan nilai positif mewakili rotasi searah jarum jam. Jika nilai negatif sebaliknya. Jadi 45deg menciptakan gradient dari kiri ke kanan. Berbeda dengan -45deg menciptakan gradient dari kanan ke kiri.

Syntax

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


Contoh berikut membuat linear-gradient ditentukan sebagai angel atau sudut antara garis horizontal dan garis gradient. Dimulai dari warna hijau lalu transisi ke kuning:

#linear1 {
    background-image: linear-gradient(0deg, green, yellow);
}
#linear2 {
    background-image: linear-gradient(60deg, green, yellow);
}
#linear3 {
    background-image: linear-gradient(120deg, green, yellow);
}
#linear4 {
    background-image: linear-gradient(180deg, green, yellow);
}
#linear5 {
    background-image: linear-gradient(-90deg, green, yellow);
}

Penghentian beberapa warna

Perhentian warna adalah titik di sepanjang garis gradient yang akan memiliki warna tertentu di lokasi itu. Lokasi pemberhentian warna dapat ditentukan sebagai persentase, atau sebagai panjang absolut. Anda dapat menentukan sebanyak mungkin penghentian warna untuk mencapai efek yang diinginkan.

#linear {
    background-image: linear-gradient(red, yellow 40%, orange 50%);
}

Repeating-linear-gradient

Anda bisa mengulangi linear-gradient dengan menggunakan fungsi repeating-linear-gradient().

#linear1 {
    background-image: repeating-linear-gradient(green, orange 10%, red 20%);
}
#linear2 {
    background-image: repeating-linear-gradient(45deg, orange 10%, red 20%);
}
#linear3 {
    background-image: repeating-linear-gradient(90deg, orange 10%, red 20%);
}

Membuat radial-gradient CSS

Dengan radial-gradient Anda bisa membuat lingkaran yang berpusat di tengah, dan menyebar ke luar dalam bentuk lingkaran atau elips. Untuk membuat radial-gradient Anda juga harus menentukan setidaknya dua pemberhentian warna.

Syntax radial-gradient

background-image: radial-gradient( shape size at position, start-color, …, last-color );
Informasi: Ada browser versi lama yang tidak mendukung gradient, sebagai fallbacknya digantikan dengan warna background-color.

Contoh berikut menunjukkan radial-gradient dengan pemberhentian warna yang merata dan ini adalah nilai defaultnya:

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

Radial-gradient penghentian warna berbeda

Contoh berikut menunjukkan radial-gradient dengan pemberhentian warna yang berbeda:

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

Mengatur bentuk radial-gradient

Anda bisa mengatur bentuk radial-gradient() untuk menentukan apakah akan berbentuk circle atau ellipse. Secara default bentuk dari radial-gradient adalah ellipse. Berikut kedua contoh tersebut:

#radial-ellipse {
    background-image: radial-gradient(red, yellow, green);
}
#radial-circle {
    background-image: radial-gradient(circle, red, yellow, green);
}

Nilai kata kunci radial-gradient

Anda bisa mengatur ukuran fungsi radial-gradient() dengan memasukan kata kunci. Ukuran dapat diatur menggunakan unit atau kata kunci sebagai berikut:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
#closest-side {
    background-image: radial-gradient(closest-side at 60% 55%, red, yellow, brown);
}
#farthest-side {
    background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, brown);
}
#closest-corner {
    background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, brown);
}
#farthest-corner {
    background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, brown);
}

Mengulai radial-gradient

Anda bisa mengulangi radial-gradient dengan menggunakan fungsi repeating-radial-gradient().

#radial {
    background-image: repeating-radial-gradient(yellow, red 15%, black 20%);
}