Gerador de gradiente CSS

Crie gradientes lineares, radiais e cônicos com visualização ao vivo e CSS pronto para cópia. Ajuste paradas, ângulos e formas — depois cole em sua folha de estilo.

CSS Gradient Generator

Live

CSS output

background: linear-gradient(135deg, #c026d3 0%, #fb923c 50%, #f43f5e 100%);

Key capabilities

  • Crie gradientes lineares, radiais e cônicos com visualização ao vivo e CSS pronto para cópia.
  • Executa no seu navegador
  • Grátis para usar

Como usar

  1. Escolha o tipo de gradiente e o ângulo ou posição.
  2. Adicione ou edite interrupções de cores.
  3. Copie o CSS gerado.

How this tool works

  1. Escolha o tipo de gradiente e o ângulo ou posição.
  2. Adicione ou edite interrupções de cores.
  3. Copie o CSS gerado.

Recommended settings

  • Use as opções padrão primeiro e depois ajuste se necessário

Supported formats

Text / on-page input

File size and limits

  • Visualizações multicamadas muito complexas podem parecer mais lentas em telefones mais antigos.

Privacy

Os geradores de cores e CSS são executados inteiramente no seu navegador. Pré-visualizações e conversões nunca carregam seus estilos.

Common use cases

  • Use o CSS Gradient Generator sempre que precisar: crie gradientes lineares, radiais e cônicos com visualização ao vivo e CSS pronto para cópia.

Troubleshooting

A visualização parece diferente depois de colar

Verifique se há CSS concorrentes em sua página (redefinições, cores herdadas). Copie primeiro a regra gerada em uma folha de estilo isolada.

Perguntas frequentes

Isso carrega meu CSS?

Não. Geradores e conversores são executados em seu navegador com visualização ao vivo.

Eu preciso de uma conta?

Não. Abra a ferramenta, ajuste os controles e copie o CSS.

Ferramentas relacionadas