Como Colocar o Texto com Fundo Degradê no seu HTML Usando CSS Gradient

Se você quer colocar o background do seu texto com cor de fundo degradê como esta da imagem do post? Então se liga nesta dica!

Lógica

Para colocar um fundo gradiente num texto é necessário colocar em uma classe um fundo gradiente (-webkit-linear-gradient) e em seguida utilizar -webkit-background-clip definido como text que permite que uma imagem de plano de fundo seja cortada por um elemento de texto e o -webkit-text-fill-color: como transparent ou seja o texto vai ter cor transparente e será exibida as cores do fundo como sendo a cor do texto.

Código Expresso

                
h1{
    background: -webkit-linear-gradient(#eb0053, #fb5a0a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

1

HTML5 Pocket Reference: Quick, Comprehensive, Indispensable

Need help finding the right HTML5 element or attribute for your web page or application? HTML5 Pocket Reference is the classic reference that web designers and developers have been keeping close at hand for more than thirteen years. This fifth edition has been updated to reflect the current state of HTML5, including the HTML5 Candidate Recommendation, the emerging HTML5.1 Working Draft, and the living WHATWG standard. Features include: An alphabetical listing of every element and attribute in HTML5, HTML5.1, and the WHATWG living standard Descriptions, markup examples, content categories, content models, and start- and end-tag requirements for every element At-a-glance notes indicating the differences between the HTML5 specifications and HTML 4.01 Useful charts of special characters An overview of HTML5 APIs If you're an experienced web designer or developer who needs a quick resource for working with established web standards, this handy book is indispensable.

Saiba mais