Ferramentas para desenvolvedores
Gerador de Gradientes CSS
Gere código CSS para gradientes lineares e radiais com direções e cores personalizadas para as suas folhas de estilo.
Executar ferramenta
O gerador de gradientes CSS permite criar regras de estilo para fundos lineares e radiais de forma rápida e prática. O utilizador pode configurar o tipo de gradiente pretendido, a orientação visual e a sequência de cores a aplicar no elemento. Quando o tipo selecionado é linear, o gerador combina a direção indicada, como graus ou termos posicionais, com a lista de tonalidades fornecida. Caso seja indicado outro valor no tipo, a ferramenta produz um gradiente radial com formato circular. A lista de cores aceita códigos hexadecimais, valores RGB ou nomes textuais separados por vírgulas, limpando os espaços adicionais entre cada item no resultado final. O código gerado fica imediatamente pronto a copiar para folhas de estilo em qualquer projeto web, facilitando a criação de transições cromáticas harmoniosas em botões, cartões, barras de navegação e secções de destaque em páginas modernas.
Instruções
- Introduza o tipo de gradiente pretendido no campo respetivo, como linear ou radial.
- Indique a direção pretendida no segundo campo quando utilizar a opção linear, por exemplo to right ou 90deg.
- Escreva a lista de cores separadas por vírgulas no campo correspondente.
- Execute a ferramenta para visualizar o código CSS gerado.
- Copie a regra CSS obtida para a sua folha de estilos.
Exemplos
- Gradiente linear horizontal: com o tipo linear, direção to right e cores #ff7e5f, #feb47b, obtém-se o código de transição suave entre dois tons quentes.
- Gradiente radial circular: ao indicar radial no tipo e cores #4facfe, #00f2fe, obtém-se uma transição circular partindo do centro.
Perguntas frequentes
Como funciona a definição de direção nos gradientes lineares?
A direção inserida, como 45deg ou to bottom, é adicionada diretamente à função de gradiente linear gerada.
O que acontece se indicar um tipo de gradiente diferente de linear?
Quando o campo do tipo contém um valor diferente da palavra linear, a ferramenta cria automaticamente um gradiente radial com formato circular.
Como devem ser separadas as cores no formulário?
As cores devem ser inseridas separadas por vírgulas. Os espaços em branco adjacentes a cada vírgula são automaticamente removidos no código final.
Que formatos de cor posso utilizar?
Pode introduzir valores hexadecimais, notações RGB, RGBA ou nomes de cores padrão suportados pela especificação CSS.