Buat Website Jadi Cool Dengan CSS Gradasi Warna / Color Gradients

Oy gaes, tampilan website saat ini sudah sangat apik nan keren. Banyak website yang seperti bukan website saja saat kita jelajahi. Selain UI yang segar dan flow ternyata juga ringan dan responsive, sangat cocok untuk para blogger juga ea

Salah satu elemen yang apik adalah warna gradien. Nah bila agan front end developer atau pingin edit template sendiri, boleh coba mendesain backgroundnya jadi gradien warna seperti ini.

Untuk mendesainnya, kita hanya menggunakan CSS saja tanpa tambahan. CSS Gradients namanya, CSS Gradient sendiri memiliki dua jenis
– Linear Gradient atau Gradasi berdasarkan arah, umumnya bentuk kode seperti berikut

background-image: linier-gradient(arah,warna1,warna2,…,warna);

– Radial Gradient atau Gradasi yang berpusat ditengah umumnya bentuk kode seperti berikut

background-image: radial-gradient(arah,warna1,warna2,…,warna);

Linear Gradient

Gradasi Atas ke Bawah (Default)

Warna 1 akan di tampilkan di Atas dan warna 2 di Bawah. Kodenya

.gradient{
background-image: linear-gradient(#03A9F4,#0043d4);
}

Gradasi Kiri ke Kanan

Warna 1 akan di tampilkan di Kiri dan warna 2 di Kanan. Kodenya

.gradient{
background-image: linear-gradient(to right,#03A9F4,#0043d4);
}

Gradasi Diagonal

Warna 1 akan di tampilkan di Kiri Atas dan warna 2 di Kanan Bawah. Mantranya

.gradient{
background-image: linear-gradient(to bottom right , #03f41f , #d400d0);
}

Gradasi Terarah

Warna – warna gradasi terarah sesuai sudut kemiringan yang diinginkan. Passwordnya

.gradient{
background-image: linear-gradient(-30deg,red,green,blue);
}

Gradasi Terulang

Warna – warna gradasi diulangi sesuai ukuran komposisi yang ditetapkan. Contohnya

.gradient{
background-image: repeating-linear-gradient(-30deg,red,green 10%,blue 20%);
}

Radial Gradient

Radial Default

Warna – warna gradasi terpusat ditengah. Passwordnya

.gradient{
background-image: radial-gradient(#FFC107 , #FF5722 , #3F51B5);
}

Radial Dengan ukuran

Warna – warna gradasi terpusat ditengah, dengan komposisi warna yang bisa diatur. Menambahkan % setelah kode warna, seperti

.gradient{
background-image: radial-gradient(#FFC107 10%, #FF5722 5%, #3F51B5 60%);
}

Radial Lingkaran Sempurna

Warna – warna gradasi terpusat ditengah dengan bentuk lingkaran sempurna. Kodenya

.gradient{
background-image: radial-gradient(circle, #FFC107 , #FF5722 , #3F51B5);
}

Radial Berulang

Warna – warna gradasi terulang sesuai ukuran komposisi warna. Contohnya

.gradient{
background-image: repeating-radial-gradient(#ffc107 , #ff5722 5% , #3f51b5 20%);
}

Kesimpulan

Sekian pembahasan kali ini tentang penggunaan CSS gradien. Yap tak hanya cool tapi juga ringan karena berbasis CSS. Mungkin malah bisa desain gambar dari sini langsung :v OK Sekian matur nuwun

Semoga Bermanfaat

Tinggalkan Balasan Batalkan balasan