CODEWITHSUNDEEP
htmlcss
user8871181
user8871181

Reputation:

How do you give a <hr> a gradient color?

I have a horizontal rule on my HTML page with the following styling applied:

#separate {
    clear: both;
    border: 3px solid red;
}

Is it possible to make the horizontal rule's colour a gradient similar to:

background: linear-gradient(to right, red , yellow)

I have attempted doing this:

#separate {
    clear: both;
    border: 3px solid linear-gradient(to right, red, yellow);
}
<hr />

But that failed.

Upvotes: 8

Views: 26729

Answers (3)

K K
K K

Reputation: 18099

Yes, just provide some height to the hr

hr {
  background: linear-gradient(to right, red, yellow);
  height: 5px;
  border: 0;
}
<hr/>

Upvotes: 19

Ali
Ali

Reputation: 1336

Please add the below CSS

#seperate {
  height: 3px;
  background: red; /* For browsers that do not support gradients */ 
  background: -webkit-linear-gradient(to right, red , yellow); /*For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(to right, red, yellow); /* For Opera 11.1 to 12.0 */ 
  background: -moz-linear-gradient(to right, red, yellow); /* For Firefox 3.6 to 15 */ 
 background: linear-gradient(to right, red , yellow); /* Standard syntax */ }
}

Please check the Fiddle link https://jsfiddle.net/pqrudt6j/

Upvotes: 2

Shahil Mohammed
Shahil Mohammed

Reputation: 3868

Here is your gradient

body{
  padding:20px;
}

.hr1 {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
<hr class="hr1" />

Upvotes: 12

Related Questions