CSS Gradient Generator

Sobre esta ferramenta

O Gerador de Gradientes CSS cria gradientes multicoloridos suaves que você pode colar diretamente no seu CSS. Suporta gradientes lineares (direcionais) e radiais (circulares) com qualquer número de paradas de cor.

As paradas de cor definem onde cada cor começa e termina ao longo do eixo do gradiente. O controle deslizante de ângulo rotaciona os gradientes lineares de 0° a 360°.

Como usar

1. Selecione o tipo de gradiente: Linear ou Radial.
2. Para gradientes lineares, arraste o controle de ângulo para definir a direção.
3. Clique em uma amostra de cor para alterá-la e arraste o controle para ajustar a posição.
4. Clique em + Adicionar parada para incluir mais paradas. Clique em ✕ para remover.
5. Clique em Copiar para copiar a declaração CSS background.

Casos de uso

Designers web criam fundos de seções hero com gradientes CSS em vez de imagens. Equipes de marca geram paletas de gradientes que correspondem às diretrizes de cores corporativas. Desenvolvedores prototipam cartões, botões e sobreposições com preenchimentos de gradiente.

Perguntas frequentes

• Qual é a diferença entre gradientes lineares e radiais? — Um gradiente linear transiciona cores ao longo de uma linha reta em um determinado ângulo. Um gradiente radial irradia cores para fora a partir de um ponto central.
• Posso usar mais de duas cores? — Sim. Clique em + Adicionar parada para incluir quantas paradas de cor precisar.
• O CSS gerado é compatível com todos os navegadores? — Sim. As funções linear-gradient() e radial-gradient() são totalmente suportadas em todos os navegadores modernos sem prefixos de fornecedor.