Escrever a sintaxe de um gradiente à mão é complicado: o ângulo, a ordem das paragens e as posições em percentagem interagem entre si, e um simples erro de escrita desfaz silenciosamente todo o background. Este gerador mantém a pré-visualização e o código sempre alinhados - o que vê é, byte a byte, o CSS que copia. Corre inteiramente no lado do cliente, pelo que nada do que cria é enviado para qualquer servidor.
CSS Gradient Generator Gratuito
Funciona inteiramente no navegador - sem carregar nada, sem registo.
Tipo
Paragens de cor
Código CSS
O que é um CSS gradient generator?
Um CSS gradient generator é uma ferramenta visual que constrói o código linear-gradient(), radial-gradient() ou conic-gradient() por si. Escolha as cores, arraste as paragens para a posição pretendida, defina o ângulo e copie CSS pronto a colar, enquanto uma pré-visualização em direto mostra exatamente o que o navegador vai renderizar. Tudo corre no seu navegador.
Como utilizar
- 1Escolha o tipo de gradiente. Escolha linear, radial ou conic. O linear mostra um cursor de ângulo; o radial acrescenta forma (círculo ou elipse) e posição; o conic tem um ângulo inicial e posição.
- 2Defina as paragens de cor. Clique em cada amostra para escolher uma cor e arraste o respetivo cursor para mover a paragem ao longo do gradiente. Adicione até 8 paragens ou reduza até um mínimo de 2.
- 3Ajuste a direção. Arraste o cursor de ângulo (0 a 360 graus) ou escolha uma palavra-chave de posição. A pré-visualização atualiza-se em direto a cada alteração.
- 4Copie o CSS. Clique em Copiar para obter a declaração de background, incluindo uma linha de reserva com cor sólida, e cole-a na sua folha de estilos.
Para quem é
- Programadores front-end que precisam de um fundo para uma secção de destaque, cartão ou botão e querem a linha exata de
linear-gradient()sem decorar a sintaxe. - Designers web e UI a reproduzir um mockup: recriam o gradiente de forma visual e entregam o CSS gerado diretamente à equipa de desenvolvimento.
- Criadores de emails e landing pages que precisam de uma linha de reserva com cor sólida para o design se degradar bem em clientes antigos - o resultado inclui-a automaticamente.
- Estudantes a aprender CSS que querem ver, em tempo real, como o ângulo, as paragens de cor e o tipo de gradiente alteram o resultado final.
Perguntas frequentes
Este CSS gradient generator é gratuito?
Sim - 100% gratuito, sem registo, sem marcas de água, sem limites. Crie tantos gradientes quantos quiser e copie o CSS diretamente para o seu projeto.
Alguma coisa é enviada para um servidor?
Não. O gradiente é criado e pré-visualizado inteiramente no seu navegador com JavaScript simples. Não são enviadas cores, código ou dados de utilização para lado nenhum.
Qual é a diferença entre gradientes linear, radial e conic?
Um gradiente linear mistura cores ao longo de uma linha reta, no ângulo que escolher. Um gradiente radial irradia a partir de um ponto central, em forma de círculo ou elipse. Um gradiente conic distribui as cores em torno de um ponto central, como uma roda de cores ou um gráfico circular.
Como funcionam as paragens de cor nos gradientes CSS?
Cada paragem associa uma cor a uma posição entre 0% e 100% ao longo da linha do gradiente. O navegador mistura suavemente as cores entre paragens vizinhas. Colocar duas paragens na mesma posição cria uma transição abrupta em vez de um esbatimento - útil para riscas e efeitos de gráfico circular.
Que navegadores suportam estes gradientes?
Todos os navegadores modernos - Chrome, Firefox, Safari e Edge - suportam linear-gradient() e radial-gradient() sem prefixo; o conic-gradient() é suportado universalmente desde 2020. O código copiado inclui também uma cor sólida de reserva para navegadores mais antigos.
Posso usar o gradiente gerado como cor de texto?
Não diretamente - os gradientes são imagens, não cores. Aplique o gradiente como background-image no elemento de texto e adicione background-clip: text e color: transparent para que o gradiente apareça através das letras.
Porque é que o meu gradiente mostra faixas (banding)?
O banding surge quando duas paragens distantes se misturam ao longo de um trajeto longo com tons semelhantes, expondo os degraus de cor de 8 bits. Reduza-o adicionando uma paragem de cor intermédia, encurtando a distância de mistura ou escolhendo cores que também difiram em luminosidade, não só em matiz.