Gerador de fundo com gradiente animado em CSS

Crie fundos de gradiente animados online, com suporte a várias cores, direções de animação e predefinições, gerando código CSS com um clique.

Relatório de bug

Modo de execução no navegador: Seus dados são processados no navegador e não são enviados ao servidor.

Velocidade e estabilidade: A velocidade de processamento depende do seu dispositivo e navegador. Para trabalhos em lote grandes, a versão para desktop pode ser mais estável.

Carregando ferramenta, aguarde...

Se a ferramenta online não carregar ou executar, tente a ferramenta para desktop. https://tools.yikeaigc.com/

Uso da ferramenta

Voltar para a versão antiga

Escolha as cores, ajuste a animação e copie ou baixe o código. Os presets podem ser usados como exemplos ou editados em cores, paradas, direção, velocidade e uso de saída. Toda a prévia, geração e salvamento ficam nesta página.

Prévia em tempo real CSS Keyframes Texto / Borda / Fundo Configurações salvas

Quantidade de cores-

Tipo de animação-

Duração-

Uso da saída-

Configuração de cores

Começar por um exemplo é mais rápido. As paradas de cor afetam o ritmo da transição; mantenha de 2 a 6 cores.

Exemplos Ao clicar, as cores atuais serão substituídas

Base do gradiente Linear é bom para fundos web, radial para foco, cônico para bordas ou badges

Tipo de gradiente

Ângulo do gradiente135°

135°

Centro radial / cônico

Paradas de cor Mantenha 2 cores; até 8 cores

Parâmetros da animação

Recomenda-se uma velocidade mais lenta como fundo da página. Para suavizar o movimento, ative o código compatível com reduzir movimento.

Tipo de animação Escolha outra lógica de geração de Keyframes

Direção do movimento Keyframes que afetam background-position

Velocidade e loop Quanto maior o fundo, mais visível o movimento das cores

Duração da animação10s

10s

Tamanho do fundo400%

400%

Curva da animação

Loop infinito Reproduzir ida e volta Pausar ao passar o mouse Compatível com reduzir movimento

Gerar e exportar

Defina o nome da classe e o cenário, copie o CSS para o arquivo de estilos do projeto e adicione a classe ao elemento alvo.

Configurações A mesma paleta pode gerar efeitos de fundo, texto ou borda

Nome da classe CSS

Uso da saída

Altura mín. do contêiner (px)

Raio dos cantos (px)

Largura da borda (px)

Fundo interno da borda

Código CSS gerado

HTML de exemplo

Prévia em tempo real

Animated Gradient Ajuste cores, direção e velocidade; o efeito atualiza na hora. Ideal para hero, botões, landing pages e cards visuais. CSS Ready

Tipo de gradiente-

Direção-

Tamanho-

Nome da classe-

Instruções

Instruções de uso do software

Escolher o esquema de cores: em “Configurações de cores”, clique em um esquema de exemplo ou adicione, remova e ajuste manualmente cores e pontos de parada.
Definir o tipo de gradiente: escolha gradiente linear, radial ou cônico e ajuste o ângulo e a posição central conforme necessário.
Configurar parâmetros de animação: em “Parâmetros de animação”, defina o modo de fluxo, a direção do movimento, a duração, o tamanho do fundo, a curva de animação e o modo de repetição.
Escolher o uso de saída: em “Gerar exportação”, escolha contêiner de fundo, texto em gradiente ou borda em gradiente, e defina parâmetros como nome da classe CSS, cantos arredondados e borda.
Visualizar o efeito: à direita, é possível alternar entre os modos de pré-visualização de fundo, cartão, texto e borda; confirme o efeito antes de gerar o código.
Copiar ou baixar o código: clique em “Copiar CSS”, “Copiar HTML” ou “Baixar CSS” para aplicar o código aos elementos da página.
Salvar configurações: clique em “Salvar configurações” para manter os parâmetros atuais e continuar a edição na próxima vez.

Perguntas frequentes

Resposta: copie o código CSS para o arquivo de estilos e adicione o nome da classe do HTML de exemplo ao elemento em que deseja exibir o gradiente.

Resposta: gradientes lineares são adequados para fundos de página e banners; gradientes radiais são ideais para efeitos de foco e difusão suave; gradientes cônicos são adequados para bordas, emblemas e visuais com sensação de rotação.

Resposta: você pode aumentar o tamanho do fundo, adicionar mais cores, ajustar os pontos de parada das cores ou escolher modos de animação como fluxo diagonal ou fluxo de respiração.

Resposta: sim. Em uso de saída, selecione “Texto em gradiente”, e a ferramenta gerará código CSS contendo background-clip:text.

Resposta: Geralmente, pode ser usado normalmente em fundos de página. Se houver muitas animações na página, recomenda-se aumentar a duração da animação, reduzir o número de cores e ativar o código de compatibilidade para redução de efeitos dinâmicos.