Gerador de Gradientes CSS

O que são gradientes CSS?

Os gradientes CSS criam transições suaves e contínuas entre duas ou mais cores sem usar imagens. São renderizados nativamente pelo browser, o que significa que escalam para qualquer resolução, carregam instantaneamente e não geram pedidos HTTP. Os gradientes são uma das ferramentas mais poderosas do CSS moderno para criar fundos, botões e elementos decorativos visualmente ricos.

Existem dois tipos principais de gradientes CSS: os lineares, que fazem a transição ao longo de uma linha reta, e os radiais, que irradiam para fora a partir de um ponto central. Um terceiro tipo, os gradientes cónicos, percorre um ponto central como uma roda de cores. Esta ferramenta foca-se em gradientes lineares e radiais, que cobrem a grande maioria das necessidades de design.

Sintaxe do gradiente CSS

A função linear-gradient() recebe uma direção (ângulo ou palavra-chave) seguida de paragens de cor. A sintaxe básica é background: linear-gradient(ângulo, cor1 posição1, cor2 posição2). O ângulo é em graus — 0deg vai de baixo para cima, 90deg da esquerda para a direita e 180deg de cima para baixo. Pode adicionar tantas paragens de cor quantas forem necessárias.

Os gradientes radiais usam radial-gradient(forma tamanho at posição, cor1, cor2). A forma pode ser circle ou ellipse. As palavras-chave de tamanho (closest-side, farthest-corner, etc.) controlam até onde se estende o gradiente. Se omitidas, o browser usa valores predefinidos que geralmente ficam corretos.

Como utilizar esta ferramenta

Escolha as suas cores com os seletores de cor, ajuste o ângulo do gradiente com o cursor ou digitando um valor em graus, e adicione ou remova paragens de cor conforme necessário. A ferramenta gera o código CSS em tempo real. Clique no botão de copiar para copiar a regra CSS completa para a área de transferência e cole-a na folha de estilos.

Dicas de design para gradientes

Os gradientes subtis parecem mais profissionais do que os dramáticos. Uma variação de 10–20 graus de matiz entre duas cores próximas e relacionadas cria um aspeto elegante e moderno. Evite combinar mais de três cores a menos que esteja intencionalmente a criar um efeito arco-íris. As áreas grandes beneficiam de gradientes suaves, enquanto os elementos de interface pequenos, como botões, podem suportar transições mais marcadas.

Para designs em modo escuro, sobreposições de gradiente em fundos escuros adicionam profundidade sem serem perturbadoras. Use paragens de cor semi-transparentes (rgba ou hsla) para criar efeitos de vidro. Sobreponha múltiplos gradientes usando vírgulas na propriedade background para composições complexas.

Considerações de desempenho

Os gradientes CSS são acelerados por GPU e extremamente eficientes — muito melhores do que carregar imagens de gradiente. Contudo, gradientes muito complexos com muitas paragens de cor podem causar pequenas diferenças de renderização entre browsers. Teste sempre os seus gradientes no Chrome, Firefox e Safari. Os browsers modernos suportam gradientes sem prefixos de fornecedor, pelo que -webkit-linear-gradient já não é necessário.

Perguntas frequentes

Posso animar gradientes CSS?

O CSS não consegue animar valores de gradiente diretamente com transition. Contudo, pode animar o background-position de um gradiente sobredimensionado, usar @property para animar propriedades personalizadas dentro de gradientes, ou fazer um crossfade entre dois gradientes usando opacity em pseudo-elementos.

Qual é a diferença entre gradientes lineares e radiais?

Um gradiente linear faz a transição de cores ao longo de uma linha reta num ângulo especificado. Um gradiente radial faz a transição para fora a partir de um ponto central numa forma circular ou elíptica. Escolha o linear para fundos e banners, e o radial para efeitos de destaque ou realces em botões.