Как задать прозрачность блока градиентом?

Question

[Денис Букреев]

Дизайнер в текстовом блоке сделал так, что текст градиентно к концу блока исчезает. Именно прозрачностью, а не цветом поверх (фон разноцветный, так что поверх градиент не положить)

Answer 1

[L0k1]

background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

не кросбраухено, ну и хрен с ним
а что у вас с гуглом?

Comments

[Денис Букреев]

именно, что такой элемент должен на всех браузерах и устройствах выглядеть эффективно, а иначе косяк

а гугол предложил пару скриптов, по цветоградиентам по тексту - тоже не решение, так как нужна прозрачность

[Андрей Федоров]

в ff кстати работает... с префиксом -webkit )

Answer 2

[Alexander Pushkarev]

background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%);
background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%);
background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0 );