CODEWITHSUNDEEP
javascriptjquerycssgradient
laaposto
laaposto

Reputation: 12213

Gradient text with css

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);

Upvotes: 2

Views: 1786

Answers (5)

laaposto
laaposto

Reputation: 12213

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.

Upvotes: 0

Molnia
Molnia

Reputation: 60

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.

Upvotes: 0

wickywills
wickywills

Reputation: 4204

Only works in Webkit from what I can see, though it does work - http://css-tricks.com/snippets/css/gradient-text/

Upvotes: 0

Ravi Gadhiya
Ravi Gadhiya

Reputation: 390

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');

Upvotes: 1

kmoe
kmoe

Reputation: 2083

For Webkit browsers, you can use background-clip and text-fill-color like so:

h1 { -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

source

Unfortunately there is at present no way to do it in other browsers using pure CSS.

Upvotes: 1

Related Questions