I'm attempting to recreate the text effect found here: . However, I'm facing issues getting it to work despite using the same code.
This is the HTML I am using:
<h1><span></span>Sign Up</h1>
My CSS looks like this:
h1 {
font-family: arial;
font-weight: bold;
font-size: 24px;
position: relative;
color: #a2a2a2;
}
h1 span {
background: url(gradient.png) repeat-x scroll 0 0 transparent;
opacity: 1;
position: absolute;
display: block;
margin-top: 2px;
width: 100%;
height: 21px;
}
However, this is the result I'm getting:
https://i.sstatic.net/ftgOk.png
I would really appreciate any assistance. Thank you!