How To

Cara Membuat Background Gradien Pada Website

Di bawah ini kita akan membuat cara membuat warna backround gradien saat melakukan scrolling.

Background Gradien

<!DOCTYPE html>
<html>
<head>
<style>
body {
  height: 3000px;
  background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}
</style>
</head>
<body>

<h1>Ubah Background Gradient Saat Melakukan Scrolling</h1>

<h2>Linear Gradient - Top to Bottom</h2>
<p> Gradien linier ini dimulai dari atas. Dimulai dengan warna hijau, berubah menjadi biru. </p>

<h2 style="position:fixed;">Scroll untuk melihat efeknya.</h2>

</body>
</html>

Cara Membuat Background Gradien

Buat warna latar belakang gradien linier yang dimulai dari atas. Mulai dari hijau kebiruan / hijau hingga biru:

Langkah 1) Tambahkan HTML:
Contoh

<h2>Linear Gradient - Top to Bottom</h2>
<p> Gradien linier ini dimulai dari atas. Dimulai dengan warna hijau, berubah menjadi biru. </p>

Langkah 2) Tambahkan CSS:
Contoh

body {
  height: 3000px; /* Digunakan untuk mengaktifkan scrolling */  background: linear-gradient(55deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 85%);
}

Hanifah Nurbaeti

Share
Tags: CSSHow To