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

Situs penyedia kode warna css "Gradient Color" yang pertama adalah ColorSpace. Anda bisa membuat warna gradasi sendiri dengan mudah, cukup masukan kode warna dan padukan dengan warna lain untuk melihat hasilnya.

Melalui ColorSpace anda dapat menemukan skema warna yang cocok untuk proyek. Hasilkan palet warna yang bagus, gradien warna dan banyak lagi. Terdapat 3 menu seperti Pallete, Gradient dan 3 Color Gradient.

Kelebihan lainnya, anda dapat mengatur posisi warna sesuai keinginan melalui fitur rotasi bentuk di ColorSpace. Setelah selesai, anda bisa mengambil hasil kode warna css nya melalui kotak dibawahnya. Berikut contoh hasil kode CSS Gradient di ColorSpace. 

• background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);

Kunjungi websitenya https://mycolor.space/gradient

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.

Kunjungi websitenya https://uigradients.com/

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.

Kunjungi websitenya https://www.colorzilla.com/gradient-editor/

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.

Kunjungi websitenya https://gradienthunt.com/

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.

Kunjungi websitenya https://www.w3schools.com/css/css3_gradients.asp

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!