Is there anyway that i can make a text gradient? I have this
<p>TEXT</p>
Can somehow make the text gradient from top to bottom with css?
I want the same result you get for
background: linear-gradient(#fbfbfb, #f2f2f2);
but only for text not the whole background. I am looking something like that:
color: linear-gradient(#fbfbfb, #f2f2f2);
For Webkit browsers, you can use background-clip and text-fill-color like so:
h1 { -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
Unfortunately there is at present no way to do it in other browsers using pure CSS.
For gradient
background-color: #efefef;
background-image: -webkit-gradient(linear,left top,left bottom,from(#efefef),to(#ffffff));
background-image: -webkit-linear-gradient(top,#efefef,#ffffff);
background-image: -moz-linear-gradient(top,#efefef,#ffffff);
background-image: -ms-linear-gradient(top,#efefef,#ffffff);
background-image: -o-linear-gradient(top,#efefef,#ffffff);
background-image: linear-gradient(top,#efefef,#ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#efefef',EndColorStr='#ffffff');
Only works in Webkit from what I can see, though it does work - http://css-tricks.com/snippets/css/gradient-text/
I have the solution but it only works on chrome for me. Here you are.
p {
background: linear-gradient(to bottom, #F00 0%,#630000 100%);
background: -moz-linear-gradient(top, #F00 0%,#630000 100%);
background: -webkit-gradient(linear, left top,left bottom, color-stop(0%,#F00 ), color-stop( 100%,#630000));
background: -webkit-linear-gradient(top, #F00 0%,#630000 100%);
background: -o-linear-gradient(top, #F00 0%,#630000 100%);
background: -ms-gradient(to bottom, #F00 0%,#630000 100%);
/*i.e */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F00', endColorstr='#630000', GradientType=0 );
/* gradient targets only on letter and not on the background*/
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;*/
Obviously
0% means that the gradient starts right from the top
100% means that the gradient ends at the end of the letter.
you can use something like that as well
background: linear-gradient(to bottom, #F00 33%,#630000 100%);
if you want to apply it to specific area.
As i wanted a solution to work in all browsers i eventually used a jQuery plugin. I used this one http://www.codefocus.ca/goodies/gradienttext
HTML:
<div id="example1">TODO write content</div>
JS:
$(document).ready(function(){
$('#example1').gradienttext({
colors: [
'#FF0000',
'#FF6600',
'#CCFF00',
'#00FF00',
'#0066FF',
'#FF00FF'
],
style: 'horizontal'
});
});
and included the appropiate js (jQuery and GradientText v0.1)
But there are so many other plugins to use. You can check:
-http://jquery-plugins.net/tag/gradient
-http://mrnix.ru/pxgradient/index_en.html
-https://github.com/Se7enSky/jquery-text-gradient
P.S. thank you for your answers that showed me that there is not a way to achieve what i wanted with pure css.