# Texto Gradiente via CSS

> Neste drop demonstro como obter Texto Gradiente usando apenas 3 propriedades CSS. É muito simples mesmo! Confere lá.

- Canonical: https://betomuniz.com/blog/texto-gradiente-via-css
- Published: 2020-07-16
- Updated: 2026-04-21T17:44:00.000Z
- Language: pt
- Tags: CSS

---

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.

```css
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;
```

![87638776-ba7c3200-c71a-11ea-9ef7-1659896db894.gif](https://user-images.githubusercontent.com/1680157/87638776-ba7c3200-c71a-11ea-9ef7-1659896db894.gif)

_PS: Não funciona no_ _**IE9**_ _(Novidade 😂) e não remova os prefixos. Até o_ _**Firefox**_ _está usando o_ _`-webkit-`__._