Cara Membuat Warna Background dan Teks Gradient

Pada pembahasan artikel kali ini saya akan bagikan tutorial untuk kalian yang ingin membuat warna gradient pada teks maupun pada background, yakni tutorial bagaimana Cara Membuat Warna Background dan Teks Gradient. Seperti yang kita ketahui bahwa gradient merupakan sebuah gabungan atau rangkaian warna yang akan terlihat sperti warna pelangi. Nah buat kalian yang ingin mencoba nya, simak langkah-langkah nya berikut ini.

Untuk membuat warna gradient kita harus menentukan element apa yang akan dikasih warna gradient, pada kasus ini element yang kan dikasih wran gradient adalah teks dan background, silahkan ketikan sintak HTML berikut untuk membuat beberapa buah kalimat yang akan dikasih warna gradient.

<body>
<link href="https://fonts.googleapis.com/css?family=Rammetto+One" rel="stylesheet">

<div class="wrapper">

  <h1 class="gradient-text-1" data-text="Why are there so many songs about rainbows?">Why are there so many songs about rainbows?</h1>

  <h2 class="gradient-text-2" data-text="Have you been half-asleep, and have you heard voices? I've heard them calling my name.">Have you been half-asleep, and have you heard voices? I've heard them calling my name.</h2>
  
  <h2 class="gradient-text-3" data-text="Is this the sweet sound that calls the young sailors?">Is this the sweet sound that calls the young sailors?</h2>

</div>
</body>

Setelah membuat kalimat berupa teks, langkah selanjut nya adalah tahapan untuk desain warna gradient pada teks dan juga background nya, berikut adalah sintak CSS3 untuk membuat warna gradient pada teks dan background.

.wrapper {
  width: 80%;
  margin: 10px auto;
  text-align: center;
  font-family: "Rammetto One", serif;
  background-image: linear-gradient( 
    to right, 
    aquamarine, 
    lightpink);
  padding: 50px;
  position: relative; 
  z-index: 1;
}

 .gradient-text-1 {
  font-size: 72px;
  background-image: linear-gradient(
    to right,
    tomato, 
    gold 40%,
    blueviolet,
    mediumspringgreen 90%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
  position: relative;
}

.gradient-text-1::after {
    content: attr(data-text);
    left: 0;
    position: absolute;
    text-shadow: 3px 3px 0px #0a0033;
    top: 0;
    z-index: -1;
}

.gradient-text-2 {
    background-image: linear-gradient(
      to right, 
      darkred, 
      orangered 40%,
      olive 70%
    ); 
    -webkit-text-fill-color: transparent;
    color: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    position: relative;
}

.gradient-text-2::after {
  content: attr(data-text);
/*   color: red; */
  background: none;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 0;
  z-index: -1;
  text-shadow:
    0px 0px 4px yellow,
    0px 0px 6px gold;

}

.gradient-text-3{
  background-image:
    radial-gradient(
      circle,
      yellow,
      palevioletred, 
      thistle,
      mediumvioletred,
      indigo
    );
  -webkit-text-fill-color: transparent;
  color: #fff;
  -webkit-background-clip: text;
  background-clip: text;
  position: relative;
}

.gradient-text-3::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -1;
  top: 0;
  text-shadow: 
    0px -2px 0px black,
    -2px 0px 0px black,
    -2px -1px 0px black,
    -2px 1px 0px black,
    -2px -2px 0px black,
    2px -2px 0px black,
    2px 2px 0px black,
    -2px 2px 0px black,
    0px 2px 0px black,
    2px 0px 0px black,
    0px -2px 0px black;
}

Setelah semua sintak diatas kalian telah ketikan, simpan file dengan format .html kemudian buka pada browser masing-masing dan lihat hasil nya, maka akan terlihat background dan teks berwarna gradient. Selesai

Baiklah cukup sekian tutorial mengenai bagaimana Cara Membuat Warna Background dan Teks Gradient, semoga bermanfaat.

Selamat mencoba 🙂