This is how to make gradient text only for WebKit , I found it from HERE !
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Is there any way to make text's color gradient by using x-repeated gradient image ?
Yes you can do it using a gradient image, just overlay the image on the text
<div class="gradient1">
<h1><span></span>CSS Gradient Text</h1>
</div>
.gradient1 h1 {
font: bold 330%/100% "Lucida Grande", Arial, sans-serif;
position: relative;
margin: 30px 0 50px;
color: #464646;
}
.gradient1 h1 span {
background: url(https://i.sstatic.net/nrgB0.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
Edit: If you are interested in using only CSS solution, which I think will support most of the browsers
<span>Isn't this awesome?</span>
span {
position:relative;
font-size: 30px;
}
span:after {
content: "";
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
Follow these two links:
The first is a tool to create CSS gradients online http://www.colorzilla.com/gradient-editor/
The second is a MS tool, to create data urn svg gradients to use in IE9+ http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
Combine the two (best with modernizr.com) and you might have what you wanted (depends on how complicated the gradient is)
