Efeito Texto Gradiente

by Felype Rennan

HTML

<div class="caixa preta com aspas gigantes">
    <div class="efeito psicodelicamente da-hora">
    A única área que eu acho, que vai exigir muita atenção nossa, e aí eu já aventei a hipótese de até criar um ministério. É na área de... Na área... Eu diria assim, como uma espécie de analogia com o que acontece na área agrícola.
    
    Primeiro eu queria cumprimentar os internautas. -Oi Internautas! Depois dizer que o meio ambiente é sem dúvida nenhuma uma ameaça ao desenvolvimento sustentável. E isso significa que é uma ameaça pro futuro do nosso planeta e dos nossos países. O desemprego beira 20%, ou seja, 1 em cada 4 portugueses.
    </div>
    <span class="autor">Gilma Roceff</span>
</div>

SCSS

body {
    font-family: Gotham, "Lucida Sans", sans-serif;
}

.caixa.preta { /* não é de avião */
    background: #111;
    width: 800px;
    height: 600px;
    padding: 48px;
    font-size: 36px;
    color: darken(#55FF9D, 15%);
}

.efeito.psicodelicamente.da-hora {
    padding: 14px;
    background: -webkit-linear-gradient(top,lighten(red, 10%) 0,darken(red,20%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;   
}
.com.aspas.gigantes{
    position: relative;
}
.com.aspas.gigantes:before {
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 120px;
    position: absolute;
    left: 0;
    top: 0;
    color: red;
    font-family: serif;
}

.com.aspas.gigantes:after {
    display: block;
    padding-left: 10px;
    content: "\201D";
    font-size: 120px;
    position: absolute;
    bottom: 0;
    right: 0;
    color: red;
    font-family: serif;
}
.autor {
    color: red;
}