Menu
I was wondering if there is a way to apply a text gradient in Firefox? I can get it to work in Chrome and Safari and the code goes like:
h1 {
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
text-transform: uppercase;
font: bold 4em "Lucida Grande", Lucida, Verdana, sans-serif;
}
But there doesn't seem to be anything out there for Mozilla.
826
Instead, use them to make headings or specific words more eye-catching. What might surprise you — especially if you have prior experience with design tools — is that you can't set a gradient as the text color directly. For example color: linear-gradient(yellow, red) won't work.
CSS defines three types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) Conic Gradients (rotated around a center point)
The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function's result is an object of the <gradient> data type, which is a special kind of <image> .
Unfortunately, I think only WebKit-based browsers implement the text-fill-color property. As far as I'm aware, there is no workaround for Mozilla yet.
145
FireFox does now appear to support the webkit parameters, aliasing -webkit-background-clip as background-clip (webkit doesn't alias it, hence the most compatible way at present appears to be to use -webkit-backgroup-clip as both FF and WK understand it)
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
