Gerador de Gradiente CSS
Crie uma declaração CSS linear-gradient, radial-gradient ou conic-gradient a partir de uma série de paradas de cor — copie o CSS pronto para sua folha de estilo.
Entrada
Direção para gradientes lineares, ângulo inicial para gradientes cônicos.
Saída
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-gradient-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"gradientType": "linear",
"angle": "90",
"color1": "#ff0000",
"position1": "0",
"color2": "#0000ff",
"position2": "100",
"useColor3": "",
"color3": "#ff6b6b",
"position3": "50"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-gradient-generator` tool (CSS Gradient Generator) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-gradient-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Gerador de Gradiente CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que faz
O Gerador de Gradiente CSS transforma um tipo de gradiente, um ângulo e um conjunto pequeno de paradas de cor em uma declaração CSS background pronta para colar. Escolha linear, radial ou cônico, selecione até três cores com um percentual de posição cada uma, e o CSS gerado é atualizado instantaneamente conforme você ajusta os controles.
Gradientes lineares vs. radiais vs. cônicos
Gradiente linear — as cores fazem transição ao longo de uma linha reta em um ângulo escolhido.
0degaponta para cima,90degaponta para a direita,180degaponta para baixo, e assim por diante ao redor do círculo. Este é o tipo de gradiente mais comum, usado para fundos, botões e sobreposições.background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);Gradiente radial — as cores irradiam para fora a partir de um ponto central, em vez de ao longo de uma linha, produzindo uma mistura circular ou elíptica. Não há ângulo a definir; o padrão do navegador (uma elipse dimensionada para o canto mais distante, centralizada no elemento) cobre a grande maioria dos casos de uso.
background: radial-gradient(#464aff 0%, #00d4ff 100%);Gradiente cônico — as cores varrem ao redor de um ponto central como uma roda de cores ou gráfico de pizza, em vez de se misturar ao longo de uma linha ou irradiarem para fora. O ângulo define onde a varredura começa.
background: conic-gradient(from 45deg, #ff0000 0%, #00ff00 50%, #0000ff 100%);
Paradas de cor e posições
Cada parada de cor emparelha uma cor com um percentual de posição (0-100%) ao longo do gradiente. A posição 0% é onde o gradiente começa e 100% é onde termina; as paradas entre elas controlam onde cada cor atinge força total. Esta ferramenta suporta duas paradas de cor obrigatórias mais uma terceira opcional — o suficiente para construir a grande maioria dos gradientes de duas e três cores usados em designs reais. As paradas são automaticamente ordenadas por posição, portanto não importa em que ordem você as insira.
Como usar
- Escolha um Tipo de Gradiente: Linear, Radial ou Cônico.
- Para gradientes Linear e Cônico, defina o Ângulo — a direção da mistura para linear, ou o ponto inicial da varredura para cônico.
- Selecione Cor 1 e Cor 2 com suas posições — estas definem o início e o fim do gradiente.
- Ative Adicionar uma terceira parada de cor se quiser uma cor intermediária e defina sua cor e posição.
- Copie a declaração
backgroundgerada da saída de código e cole-a em sua folha de estilo.
Perguntas Frequentes
Por que o gradiente radial não tem opções de forma ou posição?
Os padrões do navegador — uma elipse dimensionada para o canto mais distante, centralizada no elemento — já correspondem à forma como a maioria dos gradientes radiais são usados. Se você precisar de um círculo em vez de uma elipse, ou um gradiente fora do centro, adicione a palavra-chave circle ou uma cláusula at <position> ao CSS gerado manualmente.
Posso usar mais de três paradas de cor?
Esta ferramenta é limitada a três para manter a interface simples. Para gradientes com mais paradas, pegue o CSS gerado e estenda a lista separada por vírgulas de pares <color> <position>% manualmente — a sintaxe é a mesma independentemente de quantas paradas você adicione.
O que significa o ângulo para um gradiente cônico?
É o ângulo (em graus) onde a varredura de cor começa, medido no sentido horário a partir do topo. 0deg inicia a varredura no relógio 12; 90deg a inicia no relógio 3.
Esta ferramenta armazena ou carrega algo? Não. Todos os cálculos rodam localmente no seu navegador — seus valores de cor e posição nunca saem do seu dispositivo.