Textos em degradê com CSS
2a atrás
undefined
Em seu CSS, adicione uma classe gradient:
.gradient {
background-clip: text;
-webkit-background-clip: text;
background-image: linear-gradient(#8BC34A, #00796B);
color: transparent;
}
undefined- background-clip: text; vai cortar o background ao texto- -webkit-background-clip: text; compatibilidade para navegadores webkit- background-image: linear-gradient(...); cria um gradiente com 2 cores- color: transparent; deixa o texto transparente para aparecer o background
No seu HTML, basta adicionar um texto dentro da classe gradient:
<h1 class="gradient">This is a Heading</h1>
Anglos
O estilo linear-gradient também aceita anglos, como no exemplo abaixo:
background-image: linear-gradient(angle, color-stop1, color-stop2);
Você pode definir um ângulo de 45º, por exemplo:
background-image: linear-gradient(45deg, #8BC34A, #00796B);
O resultado ficará assim:
Mais opções
Além do linear-gradient, você pode usar outros tipos de gradientes como background, o link abaixo detalha os tipos de gradientes:
CSS Gradients
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
Comentários (0)