Cara Membuat Teks Gradient Dengan CSS3

Hai, Ketemu lagi dengan saya 🙂 , Pada tutorial sebelum nya saya telah membahas mengenai bagaimanaÂ Cara Membuat Animasi Gradient Teks Dengan CSS3, Nah kali ini akan saya bagikan yang lebih simple yaitu tutorial mengenai Cara Membuat Teks Gradient Dengan CSS3, buat kalian yang ingin membuat Teks Gradient, kalian bisa ikuti langkah-langkah berikut.

Pertama kita akan buat dulu satu paragraf bebas seperti berikut dengan HTML.

<div class="wrap">
  <h1>Gradient Text</h1>
  <h2>Lorem Ipsum is simply dummy 
text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard 
dummy text ever since the 1500s, when an unknown 
printer took a galley of type and scrambled it to 
make a type specimen book. It has survived not only 
five centuries, but also the leap into electronic 
typesetting, remaining essentially unchanged. 
It was popularised in the 1960s with the release of 
Letraset sheets containing Lorem Ipsum passages, 
and more recently with desktop publishing software 
like Aldus PageMaker including versions of Lorem Ipsum.</h2>
</div>

Kalo sudah, selanjutnya kita buat desain untuk gradient teks nya dengan kode CSS3 berikut.

.wrap h1, h2 {
  background: -webkit-gradient(linear, left top, left bottom, from(#09e7cb), to(#7a9151));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: lowercase;
  line-height: 1;
  font-size:20px;
  font-style: italic;
  text-align: justify;
}
.wrap h1 {
  font-size: 36px;   
}
.wrap {
  width: 400px;
  margin: auto
}

Nah, setelah semua kode diatas diketikan, silahkan kalian simpan dulu kemudian coba kalian buka pada browser masing-masing dan lihat hasilnya. Selesai

Baiklah, sekian tutorial mengenai Cara Membuat Teks Gradient Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂

Cara Membuat Teks Gradient Dengan CSS3

Kategori