Gerador de Gradiente CSS
Crie belos gradientes CSS. Linear e radial com pré-visualização ao vivo.
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);Reportar um Problema
Encontrou um bug ou tem uma sugestão? Ajude-nos a melhorar esta ferramenta.
O que é esta ferramenta?
O Gerador de Gradiente CSS cria fundos em gradiente lineares e radiais com pré-visualização. Gera código CSS pronto para produção para as funções linear-gradient() e radial-gradient(). Suporta múltiplas paradas de cor, ângulos e transparência. Essencial para o design web moderno.
Como usar
- 1
Adicionar cores
Clique para adicionar paradas de cor ao gradiente.
- 2
Ajustar configurações
Defina o ângulo, o tipo (linear/radial) e as posições.
- 3
Copiar CSS
Obtenha o código CSS gerado.
Perguntas frequentes
O que é um gradiente linear CSS?
Um gradiente linear faz a transição suave entre duas ou mais cores ao longo de uma linha reta. Sintaxe: background: linear-gradient(angle, color1, color2, ...). Ângulos comuns: 0° (de baixo para cima), 90° (da esquerda para a direita), 180° (de cima para baixo).
Posso usar no CSS?
Sim, gera código CSS padrão de gradiente.
Posso definir a posição de cada parada de cor?
Sim. Cada parada de cor tem um campo de posição de 0 a 100 (porcentagem). Você pode adicionar ou remover paradas conforme necessário, com um mínimo de duas. O CSS gerado sempre inclui a posição de cada parada.