Cross browser text gradient in pure css without using background image [closed]

Answer 1

	<style type="text/css">
		h1 {
			font-family: "Myriad Pro", sans-serif;
			font-size: 40px;
			font-weight: normal;
		}
		
		/* --- start of magic ;-) --- */
		.white-gradient {
			position: relative;
		}
		.white-gradient:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
			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:    -moz-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:      -o-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%);
		}
		/* --- end of magic ;-) --- */
	</style>
	
	<h1 class="white-gradient">Pure CSS text gradient without any graphics</h1>

Answer 2

You can do this with jQuery plugins.

The Cufon plugin may have it too, you should check that out. It could also be done with the Raphael plugin or SVG and VML but a pure CSS cross-browser solution is hard to find.

Only for Chrome and Safari:

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
    from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));

For the rest of the browsers you have to use some JavaScript.

Answer 3

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.