Beto Muniz
  • Share

Texto Gradiente via CSS

tech

🎨 Sabia que já é possível obter textos com efeito gradiente apenas com CSS?

🧪 Experimente a declaração abaixo em algum texto e irá obter os mesmos resultados do exemplo.

background-image: linear-gradient(90deg, #663399 0%, #dc3939 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: #ffffff47;
text-fill-color: #ffffff47;

Demonstração do Exemplo acima

PS: Não funciona no IE9 (Novidade 😂) e não remova os prefixos. Até o Firefox está usando o -webkit-.

  • Share It!
Copyright Beto Muniz © 2010-2020. All rights reserved.