Developer Tools
Web Utilities
Image ToolsGerador de Gradientes
Crie belos gradientes CSS visualmente. Gere gradientes lineares, radiais e cônicos com múltiplas paradas de cor. Copie código CSS pronto para usar.
Configurações de Gradiente
Prévia e Código CSS
.gradient-element {
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}linear-gradient(90deg, #667eea 0%, #764ba2 100%)Ferramentas Relacionadas
Sobre o Gerador de Gradientes CSS
Como Funciona
- Escolha entre tipos de gradiente linear, radial ou cônico
- Adicione múltiplas paradas de cor e posicione-as com precisão
- Personalize ângulos, formas e direções do gradiente
- Visualize gradientes em tempo real
- Copie código CSS pronto para usar em seus projetos
- Selecione entre belos gradientes predefinidos
Casos de Uso Comuns
- Criar fundos gradientes impressionantes para sites
- Projetar fundos chamativos para botões e cards
- Construir elementos de UI modernos com sobreposições de gradiente
- Gerar transições de cor para seções hero
- Experimentar combinações de cores para branding
- Aprender a sintaxe e propriedades de gradientes CSS
Perguntas Frequentes
Que tipos de gradientes CSS posso criar com esta ferramenta?
A ferramenta suporta todos os três tipos de gradientes CSS: Lineares (transições de cor em linha reta), Radiais (transições circulares ou elípticas de um ponto central) e Cônicos (transições rotacionadas ao redor de um ponto central). Cada tipo tem configurações personalizáveis.
Como adiciono múltiplas cores ao meu gradiente?
Clique no botão '+ Adicionar Parada' para adicionar mais paradas de cor. Cada parada pode ser personalizada com uma cor específica (usando o seletor de cor ou entrada hex) e posição (0-100%).
Como controlo a direção de um gradiente linear?
Para gradientes lineares, use o controle deslizante de ângulo para controlar a direção de 0 a 360 graus. 0° cria um gradiente de baixo para cima, 90° da esquerda para a direita, 180° de cima para baixo, 270° da direita para a esquerda.
Qual é a diferença entre as formas círculo e elipse para gradientes radiais?
Para gradientes radiais, 'círculo' cria um gradiente perfeitamente circular, enquanto 'elipse' cria um gradiente oval que corresponde à proporção do elemento.
Posso posicionar gradientes radiais em áreas diferentes?
Sim! Gradientes radiais podem ser posicionados no centro, topo, baixo, esquerda, direita ou qualquer canto. Isso controla de onde o gradiente se origina dentro do elemento.
Como uso os gradientes predefinidos?
A ferramenta inclui 20 belos gradientes predefinidos como Pôr do Sol, Oceano, Floresta, Doce, Fogo, Roxo, Aurora e mais. Basta clicar em qualquer botão predefinido para aplicar instantaneamente.
Como copio o código CSS do meu gradiente?
Há duas opções de cópia: 'Copiar CSS' fornece a regra CSS completa incluindo o seletor, e 'Copiar Valor' fornece apenas o valor do gradiente para usar em qualquer propriedade CSS.
Qual é o número mínimo de paradas de cor?
Um gradiente requer no mínimo 2 paradas de cor. A ferramenta aplica esse mínimo e não permitirá remover paradas se apenas duas restarem.
Posso usar esses gradientes apenas para fundos?
Embora gradientes sejam comumente usados para fundos, podem ser aplicados a background-image, border-image e até mask-image.
Como funcionam os gradientes cônicos?
Gradientes cônicos fazem a transição de cores em uma rotação circular ao redor de um ponto central, como uma roda de cores. A configuração de ângulo controla onde o gradiente começa.
Os gradientes gerados são compatíveis com todos os navegadores?
Sim, gradientes CSS são bem suportados em todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e navegadores móveis.
Posso editar as paradas de cor depois de adicioná-las?
Com certeza! Cada parada de cor pode ser editada a qualquer momento. As alterações são refletidas instantaneamente na prévia.