Gerador online de fundos em gradiente

Pré-visualize em tempo real efeitos de gradiente CSS, com suporte a gradientes lineares, radiais e cônicos, gere código e exporte imagens 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

Configure o gradiente, depois copie o código ou exporte a imagem. Suporta gradientes lineares, radiais, cônicos, repetidos e nós multicoloridos; as alterações aparecem na prévia à direita.

Configurar gradiente

Escolha o tipo de gradiente e ajuste a direção e os nós de cor. Mantenha os nós em ordem crescente.

Tipo de gradienteGradiente cônico para discos de cor e fundos circulares

Direção e formaGradiente linear aceita ângulo ou direção rápida

Ângulo linear90°

Período de repetição32%

Forma radial

Alcance da difusão

Período de repetição32%

Centro X50%

Centro Y50%

Ângulo inicial0°

Centro X50%

Centro Y50%

Repetir gradiente Camada de luz suave Vinheta Textura fina

Nós de corSuporta 2 a 10 nós, com opacidade e posição

Modelos de exemploUse como ponto de partida para ajustar cores

Exportar código

Após confirmar a prévia, copie o CSS ou exporte arquivos PNG, JPG, SVG, CSS e pacote de recursos.

Formato do códigoEscolha o tipo de declaração conforme o uso

Modo de código

Nome da classe / variável

Incluir cor de fundo reserva Comprimir código

Código CSS

Dimensões da imagemDimensões personalizadas serão usadas na exportação de imagem e SVG

Predefinições de tamanho

Qualidade JPG92%

Largura (px)

Altura (px)

Baixar recursosO pacote inclui CSS, SVG, PNG e JSON de configurações

Prévia em tempo real

Gradient Preview Atualiza ao alterar parâmetros

TipoLinear

Nós de cor2

Tamanho de exportação1920x1080

Tamanho do código0

Instruções

Instruções de uso do software

Definir o tipo de gradiente: escolha gradiente linear, radial ou cônico. O linear é ideal para banners e fundos de páginas web, o radial para efeitos de difusão a partir do centro, e o cônico para anéis, discos de cores e padrões decorativos.
Ajustar direção e forma:
- Gradiente linear: use os botões de direção ou defina a direção de 0 a 360 graus com o controle deslizante de ângulo.
- Gradiente radial: defina círculo ou elipse, alcance de difusão e posição X/Y do ponto central.
- Gradiente cônico: defina o ângulo inicial e a posição do ponto central.
Configurar pontos de cor: use o seletor de cores, o campo HEX, a porcentagem de posição e os parâmetros de transparência para controlar cada ponto de cor. É possível adicionar, excluir, ordenar e inverter cores, além de distribuir os pontos uniformemente com um clique.
Usar opções de efeito: ative gradiente repetido, camada de luz suave, vinheta e textura fina para tornar o fundo mais adequado para a primeira dobra de páginas web, cartões, pôsteres e materiais de design.
Copiar e exportar: em “Exportação de código”, escolha nome de classe CSS, apenas declaração ou modo de variáveis CSS; copie o código CSS ou exporte arquivos PNG, JPG, SVG, CSS e pacotes de recursos ZIP.
Salvar e compartilhar: em “Salvar e compartilhar”, salve as configurações atuais, gere um link de compartilhamento ou cole um código de gradiente CSS existente para carregá-lo na ferramenta e continuar editando.

Perguntas frequentes

R: O gradiente linear faz a transição ao longo de uma linha reta, ideal para fundos de páginas web, botões e banners; o gradiente radial se difunde do centro para fora, ideal para efeitos de destaque e fundos em camadas; o gradiente cônico gira ao redor do centro, ideal para discos de cores, anéis e efeitos decorativos.

R: Clique em “Adicionar cor” para adicionar pontos de cor e, em seguida, defina individualmente a cor, a porcentagem de posição e a transparência. A posição dos pontos afeta o intervalo de transição das cores, e você também pode usar “Distribuir uniformemente” para organizar rapidamente os pontos.

R: Gradientes repetidos são adequados para criar fundos regulares, como listras, ondulações e texturas circulares repetidas. Gradientes lineares e radiais podem ativar o modo de repetição; para gradientes cônicos, recomenda-se controlar o efeito por meio dos pontos de cor e do ângulo.

R: É possível exportar arquivos PNG, JPG, SVG e CSS, além de baixar um pacote de recursos ZIP. O pacote inclui código CSS, arquivo SVG, imagem PNG e JSON de configurações, facilitando o arquivamento e a edição posterior.

R: Depois de copiar o código CSS gerado, basta colá-lo no arquivo de estilos da página. A ferramenta oferece três modos: nome de classe CSS, apenas declaração e variáveis CSS, que podem ser escolhidos conforme o padrão do projeto.

R: Sim. Na área “Importar CSS” em “Salvar e compartilhar”, cole o código linear-gradient, radial-gradient ou conic-gradient e clique em “Ler na ferramenta” para continuar ajustando cores, ângulo e posição.

R: Não. A geração do gradiente, a cópia do código, o desenho da imagem e o empacotamento dos recursos são concluídos localmente, sem necessidade de enviar o conteúdo do design para o servidor.