Gerador de Gradientes CSS
Cria gradientes lineares ou radiais com até 4 cores e copia o código CSS pronto para usar.
Como criar um gradiente CSS online
Escolha o tipo de gradiente
Selecione linear ou radial, dependendo do efeito que deseja alcançar.
Adicione e ajuste as cores
Adicione até 4 cores, altere sua ordem e ajuste o ângulo ou a posição do gradiente.
Copie o código CSS
Pressione o botão de copiar e cole o código diretamente na sua folha de estilos.
Perguntas frequentes sobre o gerador de gradientes
Gradientes são uma forma simples de adicionar profundidade e estilo a qualquer design web. Esta ferramenta gera o código CSS exato que você precisa, sem precisar escrevê-lo manualmente.
Que tipos de gradiente posso criar?
+
Você pode criar gradientes lineares (em qualquer ângulo) e radiais.
Quantas cores posso usar?
+
Você pode combinar entre 2 e 4 cores no mesmo gradiente.
O código funciona em todos os navegadores?
+
Sim, é gerado com a sintaxe padrão de CSS, compatível com todos os navegadores modernos.
Preciso instalar algum programa?
+
Não, não é necessário instalar nada. Funciona diretamente no navegador.
É gratuito?
+
Sim, esta ferramenta é completamente gratuita.
Posso usar o gradiente como fundo de imagem?
+
O código gerado é CSS puro; se precisar de uma imagem, você pode fazer uma captura de tela da visualização.
Cores
Conversor de cores (HEX, RGB, HSL, CMYK)
Converta qualquer cor entre HEX, RGB, HSL e CMYK instantaneamente, com visualização ao vivo e o nome de cor mais próximo.
Gerador de paletas de cores
Cria paletas de 5 cores harmoniosas (complementares, análogas, triádicas ou monocromáticas) a partir de uma cor base.
Verificador de Contraste WCAG
Verifique se a combinação de cores de texto e fundo atende aos níveis de acessibilidade AA e AAA.
Cor aleatória
Gera uma cor aleatória com um clique e descubra seu nome, código HEX/RGB/HSL e cores similares.
Seletor de cor (conta-gotas)
Escolha qualquer cor da sua tela com a ferramenta contagotas do navegador, ou use o seletor clássico.
Simulador de Daltonismo
Envie uma imagem e veja como pessoas com protanopia, deuteranopia ou tritanopia a veriam.
Gerador de Gradientes Mesh
Crie fundos com gradientes mesh (manchas de cor difuminadas) e baixe-os em PNG ou copie o código CSS.
Gerador de Tons e Sombras
Gera automaticamente os tons mais claros e as sombras mais escuras de qualquer cor, com seu código HEX.
Misturador de Cores
Misture duas cores e descubra os tons intermediários passo a passo, com seu código HEX.
Roda de Cores (Harmonias)
Escolha uma cor na roda e descubra suas combinações harmoniosas: complementares, análogas, triádicas e muito mais.
Extrator de Paleta de Cores da Imagem
Envie uma imagem e extraia automaticamente suas cores dominantes em uma paleta, com o código HEX de cada uma.
Cor Média de uma Imagem
Envie uma imagem e calcule instantaneamente sua cor média, com seu código HEX, RGB e HSL.
Explore as cores por família
Mais de 469 cores nomeadas, com seus códigos HEX, RGB, HSL e CMYK, organizadas em 12 famílias de tonalidades.
