Cross browser text gradient in pure css without using background image

css linear-gradients
Hiten S picture Hiten S · Nov 4, 2011 · Viewed 36k times · Source

I have tried a lot for text gradient. I have found the code for safari and chrome but it is not compatible in other browsers. I want to make it work without using the background image. If u have any proper solution, kindly provide.

Answer

Harry12345 picture Harry12345 · Aug 24, 2013

I found the best way to do this is to use SVG gradients, it's easy to do and doesn't require any images, below is some code that creates a simple text gradient using SVG.

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:#FF6600;stop-opacity:1" />
          <stop offset="100%" style="stop-coloR:#FFF000;stop-opacity:1" />
        </linearGradient>
      </defs>
      <text fill="url(#grad1)" font-size="60" font-family="Verdana" x="50" y="100">
    SVG Text Gradient</text>
    </svg>

You can change the x and y values to create a horizontal/vertical or diagonal gradient, you can also apply styles to it using a CSS stylesheet, all it takes is an extra line of code between the defs tags.

  <link href="style.css" type="text/css" rel="stylesheet" 
          xmlns="http://www.w3.org/1999/xhtml"/>

This method works in the latest versions of Chrome, IE, Firefox and Safari. You can also apply radial gradients, blurs and filters, for more information go to W3 Schools.

Related questions

Gradient text color

Is there a generator , or an easy way to generate text like this but without having to define every letter So something like this: But not with rainbow colors but generate with other colors (for example white to grey/light …

Read More
SVG gradient using CSS

I'm trying to get a gradient applied to an SVG rect element. Currently, I'm using the fill attribute. In my CSS file: rect { cursor: pointer; shape-rendering: crispEdges; fill: #a71a2e; } And the rect element has the correct fill color …

Read More
CSS3 Box-Shadow Linear Gradient?

Is there a way in CSS3 to create a cross-browser (i.e.: Mozilla, Webkit, and Opera) inset box shadow that will transition from black on top to white on the bottom? The closest way that I have found to do …

Read More