Membuat Background Gradient Css

Hay Brow, selamat datang kembali di wesbite gudang ilmu aplikasi, tempatnya anda menambah ilmu. Kali ini kami akan membahasa mengenai membuat background gradient dengan css. Background atau bisa disebut latar belakang dalam membuat design website sering di gunakan untuk memercantik halaman wesbite anda, tentunya dengan menggunakan css dan pemanbahan background. 

Background dalam css ada beberapa yaitu backgound gambar dan background warna, jika background gambar kita di haruskan mendesign terlebih dahulu background yang akan di pasang kemudian baru kita panggil, sedangkan background warna kita bisa mengguanakan fasilitas library warna yang sudah ada di bahasa pemprograman css itu sendiri, 

Dalam css penggunaan background warna tidak hanya sebatas satu warna, tetapi bisa menggunakan beberapa warna yang di gabung menjadi satu yang di sebut Gradient dan dalam pembuatan background gradient terdapat pengaturan - pengaturan yang saya pikir cukup untuk membuat sebuah background yang menarik.

Dalam pembuatan background gradient ini terdapat dua atribut yaitu:

• Linear Gradients
  • bottom
  • right
• Radial Gradients
  • center

Kita akan membahas satu persatu dari atribut di atas, untuk yang pertama kita akan membahas penggunaan linear gradients untuk membuat sebuah background gradient paling tidak anda harus menentukan dua warna untuk di gabung.

CSS Gradient

Penulisan Atribute Script :

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

dalam pembuatan background gradient kita akan menggunakan fungsi css background-image yang di dalamnya kita atur sehingga menjadi background gradient.

Contoh Script:

<style>
  .backgroundGradient {
     width:500px;
     height:250px; 
     border:solid 2px;
     background-image: linear-gradient(red, white);
  }
</style>

<div class="backgroundGradient"></div>

Script css untuk background gradient background-image: linear-gradient(red, white); dengan menambah fungsi tersebut dan menambah dua warna yaitu red dan white atau merah dan putih akan menghasilkan output sebagai berikut

secara default tampilan background gradient menggunakan atribut bottom seperti gambar di atas, perubahan warna pertama ke warna kedua akan mencampur kedua warna tersebut.

Kemudian kita akan coba menambah posisi right dalam background tersbut

Contoh Script :

background-image: linear-gradient(to right, red, white);

Dengan menambah atribute to right artinya background gradient akan di mulai dari kiri ke kanan seperti gambar di bawah ini

Sekarang kita akan coba mengabungkan dua atribute bottom dan right 

Contoh Script :

background-image: linear-gradient(to bottom right, red, white);

Hasil :

jika anda perhatikan pengabungan dua atribut tersubut background gradient dari pojok kiri atas menuju ke pojok kanan bawah.

CSS Gredient Angles ( Sudut )

Penggunaan angle atau sudut jika anda ingin mengatur sudut background gradient menuju arah bawah, kanan, kiri, atau atas. 

Contoh Script :

background-image: linear-gradient(-90deg, red, white);

pemabahan sudut seperti contoh script di atas akan menghasilkan output sebagai berikut

untuk value dari anglenya sendiri anda bisa setting atau dirubah sesuai dengan kebutuhan anda.

Menggabungkan Background Gradient Multiple Warna

Dalam background gradient anda juga bisa menambahkan beberapa warna tidak hanya dua warna anda juga bisa menambahkan tiga atau lebih warna.

Contoh Script

background-image: linear-gradient(red, white, blue);

Hasil

Css Background Gradient Radial ( Center )

Background gradient ini akan fukus di center dari element 

Contoh Script

background-image: radial-gradient(red, white, blue);

Hasil

Perulangan Background Gradient Radial

Contoh Sciprt

background-image: repeating-radial-gradient(red, white, blue 10%);

Cukup sekian artikel mengenai bakcground gradient css, jika ada pertanyaan silahkan isi kolom komentar di bawah. Terimakasih.

• Twitter
• Facebook
• Google Plus

• membuat background gradient css
• background gradient css
• css background gradient
• css gradient
• bacnground gradient
• multiple gradient css