Um gradiente é uma transição suave entre duas ou mais cores. Os gradientes adicionam profundidade, dimensão e interesse visual a designs web, elementos de interface do usuário e ilustrações.
Selecione duas cores, escolha um ângulo de gradiente e veja instantaneamente o resultado no Canvas. Copie o código CSS para usar em seu projeto.
Frequently Asked Questions
Q: Qual é a diferença entre gradientes lineares e radiais?
Qual é a diferença entre gradientes lineares e radiais? Os gradientes lineares transitam ao longo de uma linha reta, enquanto os gradientes radiais irradiam de um ponto central.
Q: Posso usar gradientes em CSS?
Posso usar gradientes em CSS? Sim, use a propriedade background-image com funções de gradiente linear ou gradiente radial.
Q: Posso criar gradientes transparentes?
Posso criar gradientes transparentes? Sim, use o controle deslizante de opacidade ou edite manualmente o CSS copiado para usar valores de cores rgba() ou hsla(). Gradientes com transparência são ótimos para sobreposições e efeitos de vidro.
Q: Como posso tornar o gradiente responsivo?
Como posso tornar o gradiente responsivo? O CSS gerado funciona em qualquer tamanho de contêiner. Para gradientes de tela inteira, aplique o gradiente ao corpo ou a um elemento wrapper. Use background-size: cover para obter melhores resultados.
Q: Qual é a diferença entre gradientes lineares e radiais?
Qual é a diferença entre gradientes lineares e radiais? Transição de gradientes lineares ao longo de uma linha reta, perfeita para cabeçalhos e banners. Gradientes radiais irradiam de um ponto central, ideal para efeitos de destaque e elementos circulares.