Gerador de Gradiente
Gerador de gradiente CSS online, crie gradientes lineares e radiais, ajuste visualmente e copie código
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);O que é Gradiente CSS?
Gradiente CSS é um efeito de transição suave entre duas ou mais cores. Gradientes lineares transicionam ao longo de uma direção em linha reta, enquanto gradientes radiais se espalham para fora de um ponto central. Gradientes podem ser usados para fundos, botões, cards e outros elementos para melhorar efeitos visuais.
Como Usar
- Selecione tipo de gradiente: Linear ou Radial
- Adicione paradas de cor e ajuste posição de cada cor
- Gradientes lineares podem definir direção do ângulo, radiais podem definir posição central
- Visualize efeito do gradiente em tempo real
- Clique 'Copiar Código' para obter código CSS
- Selecione predefinições para aplicar rapidamente gradientes comuns
Usos Comuns
- Fundos Web: Adicione fundos de gradiente a páginas ou seções
- Estilos de Botão: Crie botões com gradiente para apelo visual
- Decoração de Card: Adicione bordas ou fundos de gradiente a cards
- Cores de Marca: Crie gradientes usando cores da marca
- Design UI: Rapidamente gere protótipos de gradiente para referência de design
FAQ
Q: Qual a diferença entre gradientes lineares e radiais?
A: Gradientes lineares transicionam cores ao longo de uma direção de ângulo especificada; gradientes radiais se espalham para fora de um ponto central, criando um efeito de difusão circular.
Q: O que significa posição de parada de cor?
A: Porcentagem de posição indica onde a cor aparece no gradiente, 0% é início, 100% é fim. Por exemplo, cores em 0% e 50% significa que a primeira metade transiciona da primeira cor para a segunda.
Q: Como criar gradientes multicoloridos?
A: Clique 'Adicionar Cor' para adicionar mais paradas de cor, cada cor pode ter posições diferentes, criando efeitos de gradiente complexos.
Q: Como usar o código CSS gerado?
A: Após copiar, use-o como valor para propriedade background ou background-image em seu CSS, ex: .element { background: linear-gradient(...); }