Gerador de gradiente CSS
Crie gradientes lineares, radiais e cônicos com várias cores e copie o CSS pronto.
Cores e posições
Sugestões
Processado no seu dispositivo. Nada do que você digita é enviado.
Como usar: gerador de gradiente css
- Escolha o tipo de gradiente: linear, radial ou cônico.
- Ajuste as cores, as posições e o ângulo — ou parta de uma sugestão.
- Copie o CSS e cole na propriedade
backgrounddo seu elemento.
Sobre esta ferramenta
O código gerado inclui uma cor sólida antes do gradiente como reserva para navegadores muito antigos. Gradientes CSS são desenhados pelo navegador, não pesam como imagens e se adaptam a qualquer tamanho de tela.
Para um degradê suave entre cores muito diferentes, adicione uma cor intermediária: a transição direta entre complementares (como azul e laranja) tende a passar por um tom acinzentado.
Perguntas frequentes
Qual a diferença entre gradiente linear, radial e cônico?
O linear muda de cor ao longo de uma linha (com ângulo), o radial se espalha a partir de um ponto central em círculo ou elipse e o cônico gira ao redor do centro, como um gráfico de pizza.
Funciona em todos os navegadores?
Sim. linear-gradient e radial-gradient funcionam em todos os navegadores atuais; conic-gradient é suportado por Chrome, Edge, Firefox e Safari modernos.
É grátis mesmo? Existe limite diário?
É grátis e sem limite diário. Como o processamento acontece no seu aparelho, não temos custo por uso e não precisamos limitar você.
Funciona no celular?
Sim. O site funciona em qualquer navegador moderno no Android, iPhone, Windows, Mac e Linux, sem instalar nada.