4 Situs Penyedia CSS "Gradient Color" dan Pallete Generator Terlengkap
 |
| Gradient Color dan Pallete Generator |
Apa Itu CSS "Gradient Color"?
Gradient adalah perubahan warna yang terjadi ketika dua warna atau lebih digabungkan. Gradient ini sering digunakan dalam desain-desain modern, karena gradasi warna yang dihasilkan ini menghasilkan transisi warna yang sangat lembut dan halus. Oleh karena itu, banyak desainer yang selalu menggunakan gradasi warna dalam setiap desainnya.
CSS "Gradient Color" digunakan untuk memberikan color atau warna pada elemen HTML. Dengan color ini Anda bisa memberikan nilai warna pada properti background-color, border-color, color dan yang lainnya. Pada color sendiri Anda bisa memberikan nilai atau menentukan warna mana yang akan digunakan dengan macam-macam type warna. Seperti: RGB, HEX, HSL dan yang lainnya.
Gradient color terdapat berbagai macam jenis seperti linier, radial, angle, reflected, dan diamond. Contoh CSS "Gradient Color" yang umum digunakan:
- Linear Gradients (turun/atas/kiri/kanan/diagonal)
Untuk membuat gradien linier, Anda harus menentukan setidaknya dua perhentian warna. Perhentian warna adalah warna yang Anda inginkan untuk membuat transisi yang mulus. Anda juga dapat mengatur titik awal dan arah (atau sudut) bersama dengan efek gradien.
background-image: linear-gradient(direction, red, yellow,...);
- Radial Gradients (ditentukan oleh pusatnya)
Gradien radial ditentukan oleh pusatnya. Untuk membuat gradien radial, Anda juga harus menentukan setidaknya dua perhentian warna. Secara default, bentuknya adalah elips, ukurannya adalah sudut terjauh, dan posisinya berada di tengah. Contoh berikut menunjukkan gradien radial dengan perhentian warna yang berjarak sama:
background-image: radial-gradient(red, yellow, green);
Tertarik untuk membuat warna gradasi sendiri? Berikut situs-situs penyedia kode css "Gradient Color" yang dapat anda gunakan untuk membuat warna kode gradasi secara otomatis melalui fitur generator nya. Simak ulasan lengkapnya dibawah ini!
1. ColorSpace
 |
| Gradient color generator | ColorSpace |
- background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
2. uiGradients
 |
| Gradient color generator | uiGradients |
Jika anda tidak memiliki inspirasi warna gradasi yang cocok, anda bisa membuka daftar pustaka uiGradient untuk mendapatkan kode warna gradasi yang bagus dan menarik. Beberapa pilihan warna gradasi seperti Grade Grey, Cool Blues, Drak Ocean hingga Purple Love dapat menghiasi kode CSS Gradient anda.
Untuk mengambil kode css "Gradient Color" di situs uiGradient, caranya gabungkan atau pilih warna palet yang anda sukai. Tekan dan pada sisi atas, kanan, icon embed code. Lalu Copy CSS code untuk menyalin kode warnanya.
Selain berguna untuk pembuatan kode warna css pada website/blog, uiGradient juga dapat menunjang estetika dari powerpoint kita. Dengan mengunduh file warna untuk mendapatkan warna – warna gradient untuk background atau warna font.
3. ColorZilla
 |
| Gradient color generator | ColorZilla |
ColorZilla adalah ekstensi Google Chrome dan Mozilla yang membantu pengembang web dan desainer grafis dengan tugas terkait warna dan lainnya. ColorZilla memungkinkan mendapatkan pembacaan warna dari titik mana pun di browser, dengan cepat menyesuaikan warna ini dan menempelkannya ke program lain, seperti Photoshop.
Selain itu, ColorZilla memungkinkan pembesaran halaman (zooming) web dan mengukur jarak antara dua titik pada halaman web. Built-in browser yang memungkinkan memilih palet warna dari warna yang telah ditetapkan, men-setting dan menyimpan warna yang paling sering digunakan pada palet kustom.
4. Gradient Hunter
 |
| Gradient Color Website | Gradient Hunter |
Situs penyedia kode warna css "Gradient Color" keempat adalah Gradient Hunter. Melalui website ini anda dapat menemukan ribuan warna gradasi terpopuler dalam koleksi pilihan yang diperbarui setiap hari. Anda juga bisa menggabungkan warna sendiri, hampir sama dengan uiGradient kamu bisa menemukan jenis warna gradasi liniar atau radial dan menyalin kode warna css nya di situs Gradient Hunter ini.
5. W3Schools
 |
| Tutorial Gradient color | W3Schools |
Sebagai tambahan situs penyedia kode css warna gradasi, W3Schools sangat di rekomendasikan bagi anda yang ingin mempelajari cara membuat warna gradasi dari kode dasar. Melalui wesbite W3Schools anda bisa melakukan uji coba langsung kode css yaitu dengan fitur "Try It Yourseflt" atau coba sendiri.
Selain itu W3Schools juga merupakan situs web developer informasi, dengan tutorial dan referensi yang berkaitan dengan topik pengembangan web seperti HTML, CSS, JavaScript, PHP, SQL, dan JQuery. Jadi kamu bisa belajar lebih banyak tentang dunia pemrograman di situs ini.
Akhir kata
Warna gradasi membuat tampilan projekmu menjadi lebih menarik. Tak heran jika banyak orang yang ingin mempercantik situs mereka menggunakan warna gradasi tersebut. Beberapa rekomendasi situs penyedia kode css "Gradient Color Generator" diatas semoga dapat menambah wawasan anda lebih jauh.
Menarik bukan? Bagikan postingan ini ke media sosial agar teman-temanmu ikut mengetahuinya. Dan mulai menciptakan warna gradasi yang menakjubkan lainnya. Apabila anda memiliki kritik dan saran, silahkan tinggalkan komentar dibawah ya!
Posting Komentar