Gerador de gradientes CSS
Crie gradientes CSS lineares, radiais e cônicos no navegador.
Pontos de parada de cor
Use os manipuladores de parada ou as teclas de seta para editar posições. Cada parada inclui uma cor explícita, opacidade e porcentagem.
Processamento local nativo
Seu gradiente permanece neste navegador.Não são enviadas cores ou CSS gerados para Convertr.
Gramática de importação limitada
A importação aceita linear-gradient(), radial-gradient() ou conic-gradient() com cores hex e porcentagens. Declarações, URLs, variáveis e funções desconhecidas são rejeitadas localmente.
Fallback acessível
O CSS gerado inclui uma cor de fundo sólida alternativa junto com o gradiente para renderizadores não suportados e para o controle de acessibilidade do chrome.
Perguntas frequentes
Meu gradiente está sendo carregado?
Não. O estado do gradiente, cores, CSS importado e CSS gerado permanecem no seu navegador.
Quais tipos de gradientes CSS são suportados?
O gerador cria saída linear-gradient(), radial-gradient() e conic-gradient() com várias paradas de cor hex.
O que posso importar?
A importação aceita uma gramática deliberadamente limitada usando uma função gradiente suportada, cores hex, porcentagens opcionais e valores de ângulo ou posição limitados.
Ferramentas relacionadas para desenvolvedores e design
Gerador de gradientes CSS
Construa gradientes CSS lineares ou radiais e visualize paradas de cor, ângulo, posição e repetição.
- Entrada
- Tipo de gradiente, paradas de cor, posições, ângulo e configurações de repetição.
- Saída
- Uma pré-visualização ao vivo e declaração de fundo CSS copiável.
- Limitações reais
- A renderização do navegador pode diferir ligeiramente por mecanismo, e a ferramenta não avalia contraste ou garante suporte em navegadores legados.
- Privacidade e tratamento de dados
- tipo de gradiente, paradas de cores, posições, ângulo e configurações de repetição são processados nesta tabela do navegador. Convertr não recebe ou armazenará; fechar ou re-carregar a página limpa o estado de trabalho, a menos que a ferramenta explicitamente ofereça uma download local.
Como usar esta ferramenta
- Forneça tipo de gradiente, paradas de cor, posições, ângulo e configurações de repetição nos controles da ferramenta.
- Escolha as configurações que afetam uma pré-visualização ao vivo e uma declaração de fundo CSS copiável, e execute a ferramenta.
- Revise uma prévia ao vivo e uma declaração de fundo CSS copiável antes de copiar ou baixar.
Modos de falha comuns
Uma parada de cor ausente, cor inválida ou posição incompatível impede que uma declaração CSS válida seja construída.
Exemplo útil
Crie um gradiente linear de 90 graus de #111827 a 0% para #f59e0b a 100% e copie a declaração.