Cross Browser Text Gradient in Pure CSS Without Using Background Image

Cross browser CSS 3 text gradient

If you want this to work in non-WebKit browsers, you need to use a solution other than CSS.

There are some JavaScript solutions out there, or you can use SVG.

Here's a good blog post on how to do it: http://lea.verou.me/2012/05/text-masking-the-standards-way/

Using JavaScript has the downside of... using JavaScript, but at the end of the day this is only a decorative visual effect.

Pure CSS3 text color gradient - Is it possible?

There is no cross-browser way to do this outside webkit because only webkit currently has a background-clip: text, and this extension to background-clip is not on standards track (as far as I am aware). If you want to relax your CSS3 requirement, you can accomplish the same effect cross-browser with Canvas (or SVG), but then you're talking about HTML5-capable browsers only.

css text gradient

You can do it using CSS but it will only work in webkit browsers (Chrome and Safari):

p {
    background: linear-gradient(red, blue);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>

Hard edged gradient in css?

What about multiple gradient like this:

.line {

  height:5px;

  background-image:

    linear-gradient(red,red),

    linear-gradient(blue,blue),

    linear-gradient(yellow,yellow),

    linear-gradient(purple,purple);

  background-size:

    calc(1 * (100% / 4)) 100%,

    calc(2 * (100% / 4)) 100%,

    calc(3 * (100% / 4)) 100%,

    calc(4 * (100% / 4)) 100%;

  background-repeat:no-repeat;

}

<div class="line">

</div>

---

Related Topics