Textos em degradê com CSS

2a atrás

Ion

---

0 0

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.

#CSS