Is gradient text possible with CSS3?

Question

css

Is text with a gradient possible in Opera and FF (there are no problems with this in WebKit) without using translucent images or translucent divs on the same CSS3 on top of the text?

Answer 1

Not css3, of course, but it might work:
www.artlebedev.ru/tools/technogrette/js/gradient-text/

Answer 2

I think it all depends on the situation where you need to use it.
My solution was this (the site has a white background):
h1{
font-size: 50px;
text-align: center;
position: relative;
line-height: 1;
margin-bottom: 20px
}
h1:before{
content: "";
display:block;
height: 50px;
position: absolute;
left: 0;
top: 0;
width: 100%
background: -webkit-linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
background: -moz-linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
background: -ms-linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
background: -o-linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
background: linear-gradient(top,rgba(255,255,255,0.4),rgba(255,255,255,0));
}
An example can be seen for example here

Answer 3

background:#E2E7EA
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E2E7EA', endColorstr='#C5D5D6'); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#E2E7EA), to(#C5D5D6)); /* for webkit browsers */
background-image: -webkit-linear-gradient(top, #E2E7EA, #C5D5D6);
background-image: -moz-linear-gradient(top, #E2E7EA, #C5D5D6); /* for firefox 3.6+ */
background-image: -ms-linear-gradient(top, #E2E7EA, #C5D5D6);
background-image: -o-linear-gradient(top, #E2E7EA, #C5D5D6);


Answer 4

I also searched for a long time, but I did not find anything sensible, except for translucent pictures.

Answer 5

There is a solution based on pure css3 For a
long time I could not understand how the background-clip property works: text
A lot has been written about it, but not everywhere it is explained in sufficient detail to understand the whole mechanics .. I take this article
as a basis. Today I mastered this property and me rushing to share with everyone: I
immediately propose to consider an example , and then I will tell you how and what happens there! Do not swear, though crutches, but it works)))
1. background-clip acts by analogy with the clip property, it cuts off the excess. When set to text, it will clip the background to the borders of the text inside the element.
2. In order for this background to be visible, it is necessary to make the text itself transparent, because the text is always higher than the background!
3. There are pitfalls with other properties, like text-shadow. if it is applied, then the elements will be arranged in the following sequence:
a. bottom background
b. then the text shadow (it will override all the background-clip magic)
c. then the transparent text itself.
You can avoid this by adding attributes and pseudo-elements
PS, you can find more such implementation examples at the link above in the comments, they are also great! Example , example

Answer 6

For myself, even so, I decided, for lack of a better option, with the help of a diva over the text, but the background of the diva itself is translucent.
The gradient is very convenient to set here - www.colorzilla.com/gradient-editor/

Answer 7

You can create animated gradient texts here gfto.ru/index/sozdat_animirovannyj_gradient_tekst/0-63
It will turn out very cool