Texto degradado en CSS

El CSS de los últimos años nos permite hacer cosas que antes nos llevaban mucho trabajo, una de esas coas era tener un texto degradado, muchas veces si queríamos un texto degradado en una web la solución mas fácil era hacerlo en formato de imagen, perdiendo con esto la indexabilidad…

Texto degradado en CSS:

HTML

<h1 class="textGradient">Alex Dicant</h1>

CSS

.textGradient {
  font-family: Helvetica, sans-serif;
  font-size: 5rem;
  background: -webkit-linear-gradient(#ffb1b1, #f13b3b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Resultado:

Quieres conocer otro trucos en CSS? Aca te dejo los mas recientes:

• Efecto de maquina de escribir en CSS.

Que tal el resultado? Genial ver todo lo que ahora podemos hacer con CSS…