Style CSS Garis Pemisah Dengan Gradient Color

Teknik CSS Gradasi Warna

Cara membuat garis pemisah horizontal atau yang biasa memakai code <hr/> pada artikel. pada dasarnya kode <hr/> ini sudah memiliki tampilan sendiri tanpa harus mengeditnya tapi hanya berupa garis hitam horizontal/lurus. pada CSS di bawah style dengan CSS gradient agar lebih menarik.



Gunakan code <hr/> untuk membuat garis pemisah.

123456789hr {
  border: 0;
  height: 1px;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 255, 255, 0) 100%);
  /*  Old CSS gradients */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
}