Add Gradient Background Html

MUAZHAN

4 min read

·

Jun 28, 2024

28

Share

Cara Menambahkan Background Gradient pada HTML

Gradien adalah efek visual yang menarik dan dapat digunakan untuk menambah kedalaman dan visualisasi yang lebih menarik pada halaman web. Di HTML, Anda dapat menambahkan background gradient dengan menggunakan properti CSS background-image.

Berikut adalah langkah-langkah untuk menambahkan background gradient pada HTML:

1. Menambahkan CSS

Anda dapat menambahkan kode CSS dengan dua cara:

• Inline: Menyertakan kode CSS langsung di dalam tag HTML.
• External: Membuat file CSS terpisah dan memanggilnya dalam file HTML.

Contoh Inline:

  
  


  
Ini adalah judul

Contoh External:

File CSS (style.css):

body {
  background-image: linear-gradient(to right, red, yellow);
}

File HTML (index.html):

  
  


  
Ini adalah judul

2. Menggunakan Fungsi linear-gradient()

Fungsi linear-gradient() memungkinkan Anda membuat gradien linear, yang berarti warna bertransisi secara linear dari satu titik ke titik lainnya.

Sintaks:

background-image: linear-gradient(direction, color1, color2, ...);

• direction: Menentukan arah gradien. Beberapa nilai yang valid:
  • to top
  • to right
  • to bottom
  • to left
  • to top right
  • to bottom right
  • to bottom left
  • to top left
• color1, color2, ...: Daftar warna yang digunakan dalam gradien.

3. Menambahkan Warna dan Arah

Anda dapat menambahkan warna dan arah sesuai kebutuhan. Misalnya, untuk membuat gradien merah ke kuning ke biru:

body {
  background-image: linear-gradient(to right, red, yellow, blue);
}

4. Menggunakan radial-gradient()

Selain linear-gradient(), Anda juga dapat menggunakan radial-gradient() untuk membuat gradien radial. Gradien radial menyebar keluar dari titik tengah.

Sintaks:

background-image: radial-gradient(shape, size, color1, color2, ...);

• shape: Menentukan bentuk gradien. Nilai yang valid:
  • circle
  • ellipse
• size: Menentukan ukuran gradien. Nilai yang valid:
  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner
  • cover
  • contain
  • length (misalnya, 100px)

Contoh:

body {
  background-image: radial-gradient(circle, closest-corner, blue, yellow);
}

5. Menambahkan Efek Lainnya

Anda dapat menambahkan efek lain ke background gradient, seperti opacity, shadow, dan lain-lain.

Contoh:

body {
  background-image: linear-gradient(to right, red, yellow);
  opacity: 0.5;
}

Kesimpulan

Dengan menggunakan properti CSS background-image dan fungsi linear-gradient() atau radial-gradient(), Anda dapat menambahkan background gradient yang menarik pada halaman web Anda. Anda dapat menyesuaikan warna, arah, dan efek untuk menciptakan desain yang unik dan menarik.