Imagem e design
Gerador de gradiente CSS
Crie gradientes linear, radial e cônico com prévia ao vivo e código CSS pronto para copiar.
Privacidade e responsabilidade— nenhum dado é salvo · sem garantias · uso por conta e risco do usuárioexpandir
Esta ferramenta é executada integralmente no seu navegador. Os dados inseridos ou arquivos enviados não são transmitidos, armazenados nem retidos por este site — nenhuma informação sai do seu dispositivo.
A ferramenta é disponibilizada tal como está, sem garantias de qualquer natureza, expressas ou implícitas, incluindo exatidão, adequação a uma finalidade específica ou disponibilidade. Os resultados têm caráter informativo e não substituem aconselhamento profissional (jurídico, contábil, médico ou de engenharia). A conferência dos resultados e o uso que se faz deles são de exclusiva responsabilidade do usuário. Em nenhuma hipótese o autor será responsável por danos decorrentes do uso ou da impossibilidade de uso desta ferramenta.
Para que serve
O gerador de gradiente CSS monta gradientes lineares, radiais e cônicos com prévia ao vivo e entrega a regra CSS pronta para copiar. Serve para fundos de seções e botões, capas de posts e qualquer lugar em que uma transição de cores substitui uma imagem, sem arquivo para carregar.
No linear, você define o ângulo (0° vai de baixo para cima, 90° da esquerda para a direita); no radial, a forma (círculo ou elipse) e o centro; no cônico, o ângulo inicial e o centro. As paradas de cor (até 8) têm cor e posição em porcentagem, e dá para adicionar, remover e arrastar. Oito predefinições (Pôr do sol, Oceano, Menta, Uva, Fogo, Aurora, Bolha e Céu noturno) servem de ponto de partida.
A saída é a propriedade "background" com a função correspondente: linear-gradient, radial-gradient ou conic-gradient, no formato que todos os navegadores atuais entendem. Cole no CSS do elemento e pronto.
Tudo é feito no navegador. Para extrair os códigos de uma cor ou derivar tons, use o seletor de cores; para um fundo com imagem por cima, combine o gradiente com a imagem na mesma propriedade background, separados por vírgula.
Como usar
- Escolha o tipo: linear, radial ou cônico. Ou parta de uma predefinição.
- Ajuste o ângulo (ou a forma e o centro) e as paradas de cor: cor e posição de cada uma.
- Copie a regra CSS mostrada embaixo da prévia.
Exemplo
Um linear a 45° de #FF6A00 (0%) a #EE0979 (100%) gera "background: linear-gradient(45deg, #ff6a00 0%, #ee0979 100%);", a predefinição Pôr do sol. Um radial em círculo centrado em 50% 50%, de #FCEABB a #F8B500, dá um efeito de bolha de luz.
Perguntas frequentes
O que significa o ângulo?
A direção do gradiente linear: 0° vai de baixo para cima, 90° da esquerda para a direita, 180° de cima para baixo. No cônico, é o ponto onde as cores começam a girar.
Quantas cores posso usar?
Até 8 paradas. Para um gradiente suave, duas ou três bastam; muitas paradas próximas criam faixas visíveis.
Funciona em todos os navegadores?
linear-gradient e radial-gradient funcionam em todos há anos; conic-gradient funciona nos navegadores atuais (Chrome, Firefox, Safari e Edge desde 2020).
