Desenvolvedor / CSS
Gerador de gradientes CSS
Crie um gradiente linear, radial ou cônico com prévia ao vivo, quantas paradas de cor precisar e predefinições; depois copie o CSS.
Gerador de gradientes CSS: O gerador escreve a declaração background de que o navegador precisa para o gradiente exibido: linear-gradient com um ângulo, radial-gradient com um círculo ou uma elipse a partir do centro, ou conic-gradient girando ao redor a partir de um ângulo inicial, cada um com suas paradas de cor na ordem. Uma cor sólida aparece primeiro como fallback para navegadores antigos demais para desenhar gradientes. Uma nova cor é adicionada no maior intervalo, obtida pela mistura das cores vizinhas, para que o gradiente não apresente uma mudança brusca. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.
- Categoria
- Ferramentas para desenvolvedores
- Execuções
- No seu navegador
- Custo
- Grátis · sem cadastro
- Disponibilidade
- Pronto para usar
Roda inteiramente no seu navegador
CSS
background: #ff7e5f; background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
A primeira linha é uma cor sólida para navegadores muito antigos; todos os navegadores atuais usam o gradiente da segunda linha.
Predefinições
Gradientes com transições suaves
Uma mistura entre duas tonalidades muito diferentes, como azul e amarelo, passa por um cinza sem graça no meio. Adicionar uma parada intermediária com uma cor mais vibrante mantém o gradiente vivo. Gradientes entre tonalidades vizinhas, como laranja e rosa, raramente precisam de ajuda.
Escolha ou confira as cores com o conversor de cores e adicione profundidade a um cartão com o gerador de sombras de caixa.
Texto sobre um gradiente
Confira se o texto continua legível nas duas extremidades do gradiente, não apenas no meio. Um gradiente mais escuro com texto branco, ou um gradiente sutil atrás de texto escuro, é mais seguro que um arco-íris vibrante.
Como usar
- Escolha uma predefinição ou selecione linear, radial ou cônico.
- Defina o ângulo e ajuste as cores e suas posições; adicione uma cor para incluir mais paradas.
- Copie o CSS para a sua folha de estilos.
Privacidade e limitações
Tudo é executado no seu navegador; o último gradiente é mantido somente neste navegador.
Ferramentas relacionadas
Perguntas frequentes
O que significa o ângulo em um gradiente linear?
0deg vai de baixo para cima, 90deg da esquerda para a direita, 180deg de cima para baixo e 270deg da direita para a esquerda. O gradiente é desenhado nessa direção; por isso, 135deg vai do canto superior esquerdo ao canto inferior direito.
O que é uma parada de cor?
É uma cor e a posição, de 0% a 100% ao longo do gradiente, em que ela é atingida exatamente. Entre duas paradas, as cores se misturam; colocar duas paradas na mesma posição cria uma borda nítida em vez de uma mistura, que é como as listras são feitas.
Qual é a diferença entre um gradiente cônico e um radial?
Um gradiente radial muda de cor para fora a partir do centro, formando anéis. Um gradiente cônico muda de cor ao redor do centro, como os ponteiros de um relógio, o que é útil para rodas de cores e gráficos de pizza.
Ainda preciso dos prefixos -webkit-?
Não. Todos os navegadores atuais oferecem suporte a linear-gradient e radial-gradient sem prefixo, e conic-gradient funciona em todos eles desde 2021. A cor de fallback na primeira linha serve apenas para navegadores muito antigos.
Ferramenta grátis · no seu navegador execuções · não precisa de conta