Gaya Elemen Situs Web Dengan Gradien Latar Belakang CSS

Jika Anda telah berada di internet selama lebih dari beberapa menit, kemungkinan besar Anda telah menemukan gradien CSS. Properti latar belakang CSS dapat digunakan untuk membuat berbagai gaya yang berbeda, dan salah satu jenis yang paling menarik adalah apa yang dapat dilakukan dengan nilai gradien.

Mengetahui cara mendesain dan membuat gradien CSS yang berbeda merupakan aset bagi setiap perancang atau pengembang perangkat lunak. Dari artikel ini, Anda akan mempelajari semua yang perlu Anda ketahui untuk mulai memasukkan gradien CSS dalam proyek Anda.

Apa itu Gradien CSS?

Gradien CSS pada dasarnya adalah kombinasi dari dua atau lebih warna yang bertransisi dengan mulus dari satu warna ke warna berikutnya. Keadaan transisi dari gradien CSS tergantung pada jenis gradien yang digunakan. Ada dua jenis utama gradien yang biasa digunakan dalam desain perangkat lunak: linier dan radial.

Namun, ada jenis gradien ketiga yang kurang populer dan dikenal sebagai gradien kerucut.

Sintaks Gradien CSS

Gambar latar: tipe gradien (arah, warna1, warna2);

Gradien CSS harus ditetapkan ke properti CSS gambar latar. Jenis gradien dapat menjadi salah satu dari beberapa; gradien linier, gradien radial, atau gradien kerucut. Jenis gradien diikuti dengan kurung buka dan tutup yang berisi arah transisi gradien, serta warna yang akan dimasukkan dalam gradien.

Terkait: Cara Mengatur Gambar Latar Belakang di CSS

Contoh di atas menunjukkan dua warna, tetapi gradien dapat berisi beberapa warna berbeda. Satu-satunya persyaratan adalah bahwa setiap warna dalam daftar dipisahkan dengan koma.

Apa itu Gradien Linier?

Gradien linier adalah gradien CSS paling populer. Ini menciptakan gradien transisi horizontal, vertikal, atau diagonal menggunakan dua atau lebih warna.

Contoh Gradien Linear CSS

Gambar latar: gradien linier(#00A4CCFF, #F95700FF);

Kode di atas akan menghasilkan gradien CSS berikut:

Ada satu komponen utama dari sintaks gradien dihilangkan dari contoh di atas. Komponen ini adalah arah transisi dari gradien, dan itu dihilangkan karena keselarasan default dari gradien linier adalah vertikal (atas-ke-bawah); itulah output yang diinginkan dalam contoh ini.

Kode di atas menghasilkan hasil yang sama dengan baris kode berikut. Satu-satunya perbedaan antara keduanya adalah bagian arah kode.

Menggunakan Contoh Gradien Linier Bawah

Gambar latar: gradien linier (ke bawah, #00A4CCFF, #F95700FF);

Seperti yang Anda lihat dari output, kode di atas membuat gradien yang dimulai dengan warna biru di bagian atas lalu perlahan beralih ke oranye di bagian bawah. Jika Anda ingin membalik urutan warna, Anda cukup mengganti ke bawah dengan ke puncak dan ini akan membalikkan arah gradien, menghasilkan output berikut:

Mirip dengan perataan vertikal, perataan horizontal gradien dapat dicapai dengan menggunakan dua set kata kunci arah: ke kiri dan ke kanan, yang akan menghasilkan output berikut, masing-masing.

Gradien Linier Diagonal

Dimungkinkan untuk mencapai transisi gradien linier diagonal ke segala arah gradien linier. Hanya ada empat daftar kata kunci spesifik yang perlu Anda ketahui untuk memungkinkan hal ini.

• Ke kanan bawah
• Ke kiri bawah
• Ke kanan atas
• Ke kiri atas

Menggunakan Contoh Gradien Linier Diagonal

Gambar latar: gradien linier (ke kanan bawah, #00A4CCFF, #F95700FF);

Contoh di atas menghasilkan output berikut:

Seperti yang Anda lihat dari output di atas, gradien linier membuat transisi dalam arah diagonal bergerak dari kiri atas ke bagian kanan bawah gradien.

Gradien Linier Warna-warni

Gradien linier dapat memiliki dua warna atau lebih, tetapi seperti apa lebih banyak warna dalam gradien? Susunan warna gradien linier warna-warni tergantung pada arahnya. Yang bertransisi dalam arah horizontal akan memiliki setiap warna baru yang muncul di sebelah kiri atau kanan gradien linier, tergantung pada arah yang tepat dari gradien linier.

Contoh Gradien Linier Warna-warni

Gambar latar: gradien linier (ke kanan, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

Baris kode di atas akan menghasilkan output sebagai berikut:

Seperti yang Anda lihat, setiap warna baru ditambahkan di sebelah kanan gradien, menciptakan apa yang akhirnya berubah menjadi pelangi. Output yang sama dapat dicapai dalam arah vertikal; namun, pengaturan warna spesifik pada gradien linier akan tergantung pada kata kunci arah vertikal (ke atas atau ke bawah).

Apa itu Gradien Radial?

Gradien Radial menciptakan gradien spiral dua warna lebih yang dimulai dari pusat secara default. Dimana gradien linier menghasilkan gradien lurus yang mengalir secara vertikal atau horizontal, gradien radial menghasilkan gradien melingkar yang mengalir dari pusat ke tepi luar.

Menggunakan Contoh Gradien Radial

Gambar latar: gradien radial (lingkaran, #00A4CCFF, #F95700FF);

Baris kode di atas akan menghasilkan output sebagai berikut:

Mengubah Pusat Gradien Radial

Secara default gradien radial dimulai di tengah gradien; namun, mungkin untuk mengubah titik asal dengan pengenalan beberapa kata kunci.

Mengubah Contoh Posisi Awal Gradien Radial

Background-image: radial-gradient (lingkaran di kanan atas, #00A4CCFF, #F95700FF);

Baris kode di atas akan menghasilkan output sebagai berikut:

Seperti yang Anda lihat dari output di atas gradien sekarang dimulai dari sudut kanan atas, bukan dari tengah. Perubahan ini dimungkinkan karena penyertaan kata kunci kanan atas dalam kode di atas. Daftar kata kunci berikut juga dapat digunakan untuk mengubah titik asal gradien radial:

• Kiri atas
• Kanan bawah
• Kiri bawah

Gradien Radial Warna-warni

Seperti gradien linier, gradien radial juga dapat menggunakan dua warna yang lebih banyak, perbedaan utamanya adalah di mana gradien linier menambah gradien dalam garis lurus, gradien radial menambahkan warna baru di luar tepi.

Contoh Gradien Radial Warna-warni

Gambar latar: gradien radial (lingkaran, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

Baris kode di atas akan menghasilkan output sebagai berikut:

Menyesuaikan Gradien

Sejauh ini Anda telah melihat cara mengubah arah dan titik tengah gradien, tetapi Anda belum melihat cara menyesuaikan gradien. Menyesuaikan gradien mungkin terdengar seperti banyak pekerjaan, tetapi begitu Anda memahami dasar-dasar pembuatannya gradien latar belakang CSS langkah nyata berikutnya adalah mempelajari cara membuat gradien CSS Anda lebih banyak unik.

Secara default, warna dalam gradien menempati jumlah ruang yang terdistribusi secara merata dengan setiap warna bertransisi dengan mulus ke warna setelahnya. Jadi jika dua warna digabungkan untuk membentuk gradien, setiap warna akan menempati setengah dari ruang yang tersedia saat transisi dari satu warna ke warna lainnya. Jika tiga warna digabungkan, setiap warna akan menempati sepertiga dari ruang yang tersedia.

Dengan gradien yang disesuaikan, Anda dapat menentukan jumlah ruang yang akan ditempati oleh warna dalam gradien dengan menetapkan secara eksplisit posisi berhenti warna.

Menyesuaikan Contoh Gradien Linier 1

Gambar latar: gradien linier (ke kanan, #00A4CCFF, #F95700FF 30%);

Baris kode di atas akan menghasilkan output sebagai berikut:

Output di atas menunjukkan warna kedua dalam gradien linier berhenti pada titik 30% dari warna pertama dalam gradien, alih-alih posisi biasanya, dan karena warna kedua juga merupakan warna akhir dalam gradien, warna ini secara alami meluas ke akhir.

Jika Anda menempatkan 30% dalam kode di atas di akhir warna pertama, semuanya akan menjadi lebih jelas.

Menyesuaikan Contoh Gradien Linier 2

Background-image: linear-gradient( ke kanan, #00A4CCFF 30%, #F95700FF );

Kode di atas akan menghasilkan output berikut.

Output di atas dengan jelas menunjukkan warna pertama dalam gradien berhenti pada titik 30% dari warna kedua dalam gradien. Contoh ini bersama dengan yang di atas akan membantu membuat penyesuaian penghentian warna lebih mudah untuk Anda pahami.

Menyesuaikan gradien radial dilakukan dengan cara yang sama seperti gradien linier. Satu-satunya hal yang perlu Anda lakukan untuk mencapai hasil yang sama di atas dalam gradien radial adalah mengubah jenis dan arah gradien.

Membuat Gradien CSS Tidak Pernah Semudah Ini

Artikel tutorial ini memberi Anda alat untuk mengidentifikasi dan membuat gradien linier dan radial. Jika Anda telah mencapai titik ini, Anda telah mempelajari cara mengubah arah dan pusat gradien. Selain itu, Anda sekarang memiliki keterampilan untuk menyesuaikan gradien CSS dan membuat gradien latar belakang yang unik.

Namun, jika Anda tidak ingin langsung membuat gradien baru dan unik, Anda dapat mulai dengan membuat beberapa gradien yang sudah ada sebelumnya.

27 Contoh Gradien Latar Belakang CSS yang Bergaya

Warna solid begitu tahun lalu. Gradien masuk! Tapi bagaimana Anda membuatnya di CSS?

Baca Selanjutnya

Tentang Penulis

Perluas untuk Membaca Cerita Lengkap