Portal de Utilidades

Gerador de Gradientes CSS

Crie gradientes CSS lineares ou radiais e copie o código pronto para usar.

Processado 100% no seu navegador — nada que você digita ou envia aqui sai do seu dispositivo.

background: linear-gradient(90deg, #3366cc, #cc3366);

Sobre esta ferramenta

Selecione duas ou mais cores, o tipo de gradiente (linear ou radial) e um ângulo, e veja o código CSS pronto para copiar — por exemplo, `linear-gradient(90deg, #4f46e5, #06b6d4)` cria uma transição diagonal do azul-violeta para o ciano. O gradiente é atualizado visualmente em tempo real conforme você ajusta as cores e o ângulo, para que você veja o resultado antes de copiar o código. Processamento 100% no navegador.

Como usar

Insira os dados na ferramenta e confira o resultado exibido no navegador.

Como funciona

Selecione duas ou mais cores, o tipo de gradiente (linear ou radial) e um ângulo, e veja o código CSS pronto para copiar — por exemplo, `linear-gradient(90deg, #4f46e5, #06b6d4)` cria uma transição diagonal do azul-violeta para o ciano. O gradiente é atualizado visualmente em tempo real conforme você ajusta as cores e o ângulo, para que você veja o resultado antes de copiar o código. Processamento 100% no navegador.

Exemplo: O resultado depende dos dados informados e é exibido localmente.

Limitações: Confira os formatos e limites indicados pela interface antes de usar o resultado.

Revisado em: 2026-01-01

Ferramentas relacionadas