Crie um belo gradiente de texto CSS sem esforço

Crie efeitos de texto gradiente impressionantes para o seu site

Controles de gradiente

Texto de gradiente CSS
.gradient-text { background: linear-gradient(to right, #4F46E5, #EC4899); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

Gradientes populares

Sunset
linear-gradient(to right, #FF512F, #F09819)
Magic
linear-gradient(to right, #4158D0, #C850C0, #FFCC70)
Ocean
linear-gradient(to right, #0093E9, #80D0C7)
Electric
linear-gradient(to right, #30CFD0, #330867)
Salada de frutas
linear-gradient(to right, #FA709A, #FEE140)
Neon Glow
linear-gradient(to right, #00DBDE, #FC00FF)

Modo de Utilização

1

Digite seu texto

Digite o texto ao qual deseja aplicar o gradiente no campo de entrada "Texto".

2

Escolha o tipo de gradiente

Selecione entre os tipos de gradiente Linear, Radial ou Cônico.

3

Ajustar direção ou ângulo

Para gradientes lineares, escolha uma direção. Para gradientes cônicos, defina o ângulo.

4

Personalizar cores

Adicione, remova ou ajuste as paradas de cor e suas posições para criar o gradiente desejado.

5

Copiar ou salvar CSS

Copie o código CSS gerado ou salve-o como um arquivo CSS para usar em seus projetos.

Sobre gradientes de texto

Os gradientes de texto CSS permitem que você aplique gradientes bonitos e multicoloridos diretamente ao texto. Esse efeito já foi possível apenas com imagens, mas o CSS moderno o torna simples e eficiente.

Suporte ao navegador:Os gradientes de texto são compatíveis com todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. Para navegadores mais antigos, como o Internet Explorer, o texto voltará a uma cor sólida.

Dicas de uso:Os gradientes de texto funcionam melhor com texto em negrito e combinações de cores de alto contraste. Experimente diferentes tipos e direções de gradiente para obter o efeito desejado.

Related Tools