Gerador de Gradiente CSS Grátis
Este gerador de gradiente CSS gratuito cria um gradiente linear ou radial a partir de duas ou três cores e um ângulo, mostra uma visualização e fornece o CSS para copiar, incluindo um fallback de cor sólida para navegadores antigos. É ideal para designers e desenvolvedores que querem um fundo para uma seção hero, um botão ou um card sem escrever a sintaxe manualmente.
CSS Gradient Generator
Generators and Converters
Sobre esta ferramenta
Um gradiente CSS é uma imagem de fundo desenhada pelo navegador, portanto não consome download e permanece nítido em qualquer tamanho. A sintaxe é curta mas fácil de esquecer: linear-gradient recebe um ângulo e uma lista de cores, e radial-gradient espalha as cores a partir de um ponto central.
Escolha o estilo, defina o ângulo para um gradiente linear e escolha duas cores. Ative a terceira cor para uma mistura de três paradas; as paradas são distribuídas uniformemente. A página desenha uma visualização com os mesmos valores e imprime uma regra de fundo com uma cor simples primeiro, para que navegadores que não conseguem desenhar gradientes ainda mostrem algo sensato. Os ângulos seguem a regra CSS: 0 graus aponta para cima, 90 para a direita, 180 para baixo.
Observe o contraste quando o texto fica sobre um gradiente: verifique as partes mais claras e mais escuras em relação à cor do texto com o seletor de cores. Gradientes com matizes muito diferentes podem parecer turvas no meio, então tente uma terceira cor que fique entre elas. Nada do que você escolher é armazenado.
Perguntas frequentes
O que significa o ângulo em um gradiente linear?
É a direção da mudança de cor. Zero graus aponta para o topo, 90 graus para a direita, 180 graus para o fundo e 270 graus para a esquerda. Uma diagonal como 135 graus vai do canto superior esquerdo para o canto inferior direito.
Por que o CSS inclui uma cor sólida primeiro?
É um fallback. Um navegador que não consegue desenhar gradientes ignora a linha de gradiente e usa a cor simples acima dela, para que o fundo nunca fique vazio. Todos os navegadores atuais suportam gradientes, então isso cobre apenas os muito antigos.
Qual é a diferença entre linear e radial?
Um gradiente linear muda de cor ao longo de uma linha reta no ângulo que você escolher. Um gradiente radial começa no centro e muda de cor para fora em um círculo ou elipse, o que é adequado para holofotes, botões e brilhos suaves.
Posso usar mais de três cores?
Esta ferramenta cria duas ou três paradas, o que cobre a maioria dos designs. Para mais, copie o CSS e adicione paradas de cor extras manualmente, separadas por vírgulas, opcionalmente com uma posição como #ff0000 40%.