Como gerar gradientes CSS lineares ou radiais

Preencha o tipo, a direção e as cores para gerar uma declaração CSS de gradiente linear ou radial. Se não indicar valores, são assumidos linear, to right, #ff7e5f e #feb47b.

Para que serve o gerador de gradientes CSS

Um gradiente CSS permite criar uma transição visual entre cores para fundos, cartões, botões e outras áreas de uma página. Esta ferramenta gera uma declaração CSS para gradientes lineares e para gradientes radiais com forma circular, a partir de alguns campos de texto opcionais. É útil quando pretende obter rapidamente uma base de estilos sem escrever a declaração manualmente.

Como gerar o gradiente passo a passo

1. Abra o gerador e localize os campos destinados ao tipo de gradiente, à direção e às cores.
2. No campo do tipo, escreva linear se quiser um gradiente linear. Se deixar o campo vazio, o valor assumido é linear.
3. Indique a direção no respetivo campo, como to right ou outro texto adequado ao seu caso. Quando o tipo for exatamente linear, esse texto é incluído na declaração CSS gerada. Se não preencher a direção, é usado to right.
4. Introduza as cores no campo próprio. Pode separá-las por vírgulas, por exemplo #264653, #2a9d8f, #e9c46a. Também pode inserir espaços junto das vírgulas: esses espaços são retirados de cada elemento antes de a lista ser reunida.
5. Se não indicar cores, são usados #ff7e5f e #feb47b. Depois de preencher os campos, execute a ação disponível para gerar o resultado e copie a declaração CSS apresentada.
6. Para obter um gradiente radial, introduza um valor de tipo diferente de linear. Nesse caso, o resultado usa um gradiente radial com forma circle. A direção deixa de determinar um gradiente linear, porque o ramo radial é escolhido pelo tipo indicado.

Como interpretar o resultado

Leia o resultado de acordo com o tipo que introduziu. Com linear, a direção fornecida aparece na declaração e as cores surgem numa lista separada por vírgulas. Com qualquer outro texto no campo do tipo, a saída passa para um gradiente radial circular; por isso, não deve interpretar esse caso como uma variação linear.

A forma como escreve as cores também afeta a lista apresentada: as vírgulas separam os elementos, os espaços laterais são removidos e os elementos são reunidos com vírgula e espaço. Assim, #264653, #2a9d8f é tratado como dois elementos, sem os espaços excedentes junto de cada cor. O resultado é uma base CSS gerada a partir do texto fornecido, pelo que deve confirmar se os valores escolhidos correspondem ao efeito que pretende antes de os aplicar numa página.

Exemplo prático

Para aplicar um fundo vertical num cartão, uma pessoa escolhe três cores e pede um gradiente linear de cima para baixo.

No gerador, introduza linear no tipo, to bottom na direção e #264653, #2a9d8f, #e9c46a nas cores; depois execute a ação de geração.

O resultado tem a forma de uma declaração CSS de gradiente linear, com a direção to bottom e as três cores reunidas por vírgula e espaço.

Limitações

• O resultado depende do texto fornecido: a direção é incorporada no caso linear, enquanto os valores de tipo diferentes de linear conduzem ao formato radial circular. A lista de cores é apenas separada e reorganizada conforme as vírgulas e os espaços introduzidos.

Erros comuns

• Indicar um tipo diferente de linear sem intenção: isso encaminha o resultado para um gradiente radial circular. Escreva exatamente linear quando precisar de uma direção linear e separe as cores por vírgulas para manter cada elemento distinto.

Perguntas frequentes

Quais são os valores usados quando não preencho os campos?

Se o campo ficar vazio, o tipo assumido é linear, a direção é to right e as cores são #ff7e5f e #feb47b.

Como escolho entre um gradiente linear e um radial?

Quando o tipo introduzido for exatamente linear, a direção indicada é incluída no resultado. Com outro valor de tipo, o resultado usa um gradiente radial com forma circle.

Como devo escrever várias cores?

Separe as cores por vírgulas. Os espaços laterais de cada elemento são retirados e os elementos são reunidos com vírgula e espaço no resultado.