Sobre esta ferramenta
Crie lindos gradientes lineares e radiais CSS com um editor visual. Escolha cores, ajuste paradas, mude de direção ou ângulo e veja a atualização da visualização ao vivo em tempo real. Copie o código CSS gerado – incluindo prefixos de fornecedores para navegadores mais antigos – e cole-o diretamente em sua folha de estilo.
Perguntas frequentes
- Os gradientes CSS funcionam em todos os navegadores?
- Gradientes CSS modernos (gradiente linear, gradiente radial) são suportados em todos os navegadores atuais, incluindo Chrome, Firefox, Safari e Edge. A ferramenta pode gerar opcionalmente prefixos -webkit- para versões mais antigas de navegadores.
- Posso criar gradientes multicoloridos?
- Sim. Adicione quantas paradas de cores forem necessárias. Você também pode ajustar a posição de cada parada para controlar onde as cores se misturam. Isso permite gradientes complexos de arco-íris, pôr do sol ou marca personalizada.
- Qual é a diferença entre gradientes lineares e radiais?
- Gradientes lineares fazem transição de cores ao longo de uma linha reta (de cima para baixo, da esquerda para a direita, diagonal ou qualquer ângulo). Os gradientes radiais fazem a transição das cores para fora de um ponto central em uma forma circular ou elíptica.
- Posso usar o gradiente como plano de fundo para o texto?
- Sim. Use background-clip: text com -webkit-text-fill-color: transparente para aplicar o gradiente ao texto. O CSS gerado fornece a definição de gradiente — combine-o com essas propriedades para texto gradiente.