Gradiente na letra (Chrome e Firefox)

[Henrique Buzin 1]

Olá estou querendo utilizar a função gradiente do ccs 3 em letras, contudo utilizei as seguintes linhas:

 

-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;

e apenas funcionou no Chrome, mas preciso que também funcione no Firefox se alguém souber alguma maneira, por favor não hesite em responder.

Agradeço desde já.

[wilnet 92]

Olá Henrique, veja se esse exemplo resolve:

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

Testei no Chrome, Firefox, IE, Safari e Opera.

 

Fonte: Link