Cara Membuat Gradasi Warna Dengan CSS

Cara Membuat Gradasi Warna Dengan CSS

Gradasi warna adalah corak warna yang dihasilkan dari dua warna atau lebih yang digabung.

Kita dapat membuat gradasi warna di web dengan CSS. Yaitu dengan properti linear-gradient, dan radial gradient

  • Linear Gradient yaitu gradasi warna yang berdampingan, atas ke bawah, atau kanan ke kiri.
  • Radial Gradient yaitu gradasi warna yang berpusat di tengah.

Langsung saja, berikut caranya.

Linear Gradient

Berikut adalah sintax dasarnya.

background: linear-gradient(arah, warna1, warna2, warna3, dst)

Untuk menggunakanya, linear gradient dimasukan didalam properti background.

Arah

Parameter arah diisi dengan arah dari gradient, berikut parameter-parameternya.

  • to right
  • to left
  • to top right
  • to top left
  • to bottom right
  • to bottom left
  • juga bisa dengan angle(90deg, 180deg, dll)

Untuk parameter warna silahkan isi dengan warna.

Contoh.

HTML

<div>
 Linear Gradient
</div>

CSS

div{
 background: linear-gradient(to bottom right, red, yellow);
 padding: 4rem;
 color: white;
}

Berikut Hasilnya

Linear Gradient

Radial Gradient

Berikut adalah sintax dasarnya.

background: radial-gradient(circle, warna1, warna2, warna3, dst)

circle artinya gradasinya menjadi terpusat di tengah.

Contoh

HTML

<div>
 Radial Gradient
</div>

CSS

div{
 background: radial-gradient(circle,red,yellow);
 padding: 4rem;
 color: white;
}

Berikut Hasilnya

Radial Gradient

Bonus

Jika kalian tidak mau repot-repot membuat gradasi css, anda dapat mencari gradasi warna di https://gradienthunt.com.

Disana terdapat banyak gradasi css siap pakai, anda hanya tinggal copy codenya saja.

Gradient Hunt

Related Post

Comments

X