Cara Membuat Warna Gradien dengan CSS dan HTML – Hai ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan membahas tentang css gradient. Warna gradien merupakan paduan dari beberapa warna dalam satu frame. Biasanya dari warna muda, sedang, sampai tua. Pada sekarang ini banyak pada programmer atau desainer yang menggunakan warna gradien/gradient color karena dengan menggunakan gradient color aplikasi/website menjadi terlihat lebih smooth dan enak dipandang dibandingkan dengan solid color yang warnanya terlalu mencolok. Tapi tentunya sobat gunakan juga warna yg smooth untuk mendapatkan tampilan yang smooth juga dan jangan membuat perpaduan warna yang aneh-aneh yang membuat aplikasi anda terlihat menor.
Macam-macam Warna Gradien
Ada banyak macam jenis warna gradien yang bisa sobat gunakan seperti dari kanan ke kiri, atas ke bawah, pojok kiri atas ke pojok kanan bawah dan masih banyak lagi. Karena untuk contoh maka saya akan banyak menggunakan warna solid jadi nantinya sobat bisa coba-coba sendiri untuk membuat warna yang semenarik mungkin. Berikut adalah macam-macam warna gradien yang bisa sobat gunakan pada website sobat :
1. Linear Gradien – Atas ke bawah
Warna gradien ini merupakan default dari css gradien. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
#gradient1 {
background-image: linear-gradient(yellow, red);
}
</style>
Pada contoh diatas saya menggunakan warna solid dengan menyebutkan warna/color dalam bahasa inggris saja seperti yellow, red, green, blue, black, gray, dll namun sobat juga bisa menggunakan hex color atau RGB. Kemudian pada htmlnya sobat tambahkan pada id-nya seperti dibawah (karena saya mencontohkan #gradient1 jadi tanda # adalah id namun jika sobat ingin menambahkan pada class maka sobat gunakan .gradient1 ganti tanda # dengan tanda titik(.) )
<div id="gradient1"></div>
Hasilnya :
2. Linear Gradien – Kiri ke Kanan
Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
#gradient2 {
background-image: linear-gradient(to right, #4682B4, #00FFFF, #00FA9A);
}
</style>
Pada contoh sebelumnya saya menggunakan nama warna dalam bahasa inggris namun pada contoh ini saya menggunakan hex code. Kemudian pada htmlnya sobat tambahkan pada id-nya seperti dibawah
<div id="gradient2"></div>
Hasilnya :
3. Linear Gradient – Diagonal
Pada contoh dibawah ini berupa diagobal atau dari pojok kiri atas ke pojok kanan bawah. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
#gradient3 {
background-image: linear-gradient(to bottom right, #FF0000, #FFC0CB);
}
</style>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
<div id="gradient3"></div>
Hasilnya :
4. Linear Gradient – Angles
Contoh kali ini kita akan menggunakan gradient dari angel. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
#gradient4 {
background-image: linear-gradient(-90deg, red, yellow);
}
</style>
Sobat bisa ganti -90deg dengan yang sobat inginkan. Kemudian pada htmlnya sobat tambahkan pada id-nya seperti dibawah
<div id="gradient4"></div>
Hasilnya :
5. Linear Gradient – Multiple Color
Penggunaan warna pada css ini juga bisa sobat padukan antara nama dalam bahasa inggris, hex code dan RBG/RGBA. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
#gradient5 {
background-image: linear-gradient(red, #FF1493, rgba(255,192,203));
}
</style>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
<div id="gradient5"></div>
Hasilnya :
6. Linear Gradient – Multiple Color Kiri ke Kanan
Warna gradien ini merupakan default dari css gradien. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
#gradient6 {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
</style>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
<div id="gradient6"></div>
Hasilnya :
7. Linear Gradient – Transparan
Dengan kode ini kita bisa membuat warna lebih smooth dan tidak mencolok yaitu dengan menggunakan rgba(). Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
#gradient7 {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
Pada contoh diatas kita menggunakan 1 warna yaitu warna merah rgb(255, 0, 0) namun warnanya transparan dari 0 ke 1. Kemudian pada htmlnya sobat tambahkan pada id-nya seperti dibawah
<div id="gradient7"></div>
Hasilnya :
8. Linear Gradient – Repeat/Mengulang Warna
Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
#gradient8 {
background-image: repeating-linear-gradient(#00FA9A, #FFFF00 10%, #FF4500 20%);
}
</style>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
<div id="gradient8"></div>
Hasilnya :
9. Gradient – Radial
Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
#gradient9 {
background-image: radial-gradient(red, orange, yellow);
}
</style>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
<div id="gradient9"></div>
Hasilnya :
10. Gradient Radial – Ketebalan Warna
Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
#gradient10 {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
<div id="gradient10"></div>
Hasilnya :
11. Gradient Color – Shape
Shape ini seperti kita pada microsoft office ada circle, dll. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
#gradient11 {
background-image: radial-gradient(circle, red, yellow, green);
}
</style>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
<div id="gradient11"></div>
Hasilnya :
12. Gradient – Ketebalan 1
Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
#gradient12 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
</style>
sobat juga bisa gunakan
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Pada htmlnya sobat tambahkan pada id-nya seperti dibawah
<div id="gradient12"></div>
Hasilnya :
14. Gradient – Ketebalan 2
Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
#gradient12 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
</style>
sobat juga bisa gunakan
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Pada htmlnya sobat tambahkan pada id-nya seperti dibawah
<div id="gradient13"></div>
Hasilnya :
14. Radial Gradient – Repeat/Mengulang
Warna gradien ini merupakan default dari css gradien. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
#gradient14 {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
<div id="gradient14"></div>
Hasilnya :
15. Animasi Backgrund warna gradient
Pada contoh terakhir saya akan mencontohkan gabungan dari warna gradient dan css animasi. Sehingga seolah-olah warna background berubah-ubah. Penggunaannya yaitu sobat buat file cssnya seperti dibawah yang diletakkan pada file css sobat seperti style.css atau antara tag <head>
<style type="text/css">
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #7CFC00, #00FF00, #EE7752, #E73C7E, #23A6D5, #23D5AB, #FFFF00);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
</style>
dan pada htmlnya sobat tambahkan pada id-nya seperti dibawah
<body> <h1>Animasi Gradient pada Background Website dengan CSS</h1> </body>
Hasilnya :
Warna background akan berubah-ubah. Padahal itu hanya animasi saja warnanya tidaklah berubah melainkan itu adalah warna gradient yang di zoom kemudian bergerak dengan keyframe dan mengulang-ulang. Jika sobat belum tahu tentang keyframe cari saja pada blog ini nanti saya akan membahas juga tentang css animasi dengan keyframe yang bisa membuat object bergerak pada website hanya menggunakan css saja.
Pada contoh diatas tentunya tidak bisa digunakan langsung di website/aplikasi yang sobat buat karena saya menggunakan warna yang mencolok. Sobat bisa kreasikan sesuai imajinasi sobat sehingga menghasilkan warna yang smooth dan eyecatching. Sekian postingan saya tentang Cara Membuat Warna Gradien dengan CSS dan HTML. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
mantap kak sangat membantu
sampai pewarnaan pun dijelaskan di artikel web ini. keren. semangat terus bang
Terima kasih, sangat bermanfaat buat saya