Algo errado nesta ferramenta?
Sobre «Gerador De Gradiente CSS Online»
Esta ferramenta constrói gradientes CSS lineares, radiais, e cônicos visualmente. Adicione paradas de cor, escolha direção ou ângulo, defina transparência, e a ferramenta gera o código CSS correspondente pronto para colar em sua folha de estilo.
Gradientes estão por toda parte no design web moderno: fundos hero, estados de botão, acentos de cards, e texto em gradiente. Escrever sintaxe de gradiente CSS à mão é chato — edição visual permite experimentar transições suaves sem edições por tentativa e erro.
A saída suporta recursos modernos como múltiplas paradas de cor, posicionamento por porcentagem, interpolação de matiz em diferentes espaços de cor, e gradientes cônicos para efeitos circulares. Copie como CSS ou como classe utilitária Tailwind.
Como usar esta ferramenta
Como montar uma declaração CSS linear-gradient com dois stops
Escolha os stops
"Color 1" e "Color 2" aceitam qualquer cor CSS: hex (`#1e3a8a`), rgb (`rgb(30 58 138)`), rgba com alpha ou nomes (`navy`). O primeiro stop em 0%, o segundo em 100%.
Ângulo
"Angle (deg)" define a direção em graus. `0` de baixo para cima, `90` da esquerda para a direita, `180` de cima para baixo (padrão do CSS), `45` a diagonal clássica.
Executar
Resultado: um único campo `css` — `linear-gradient(<angle>deg, <color1>, <color2>)`. Cole como valor de `background:` ou `background-image:`.
Além de dois stops
Para radial, conic ou 3+ stops, edite a saída na mão — sintaxe `linear-gradient(45deg, #fff 0%, #000 50%, #f00 100%)`. Ou use um editor de gradientes mais robusto; esta ferramenta é intencionalmente mínima para linear de 2 stops.