Gerador de gradiente CSS
Adicione pontos de cor, escolha linear, radial ou cônico, e copie o código CSS background pronto direto para sua folha de estilo. Comece de um predefinido ou crie um do zero.
Predefinições
Tipo
Pontos de cor
Pré-visualização
CSS
Perguntas frequentes
Qual a diferença entre gradiente linear, radial e cônico?
Um gradiente linear faz as cores transitarem ao longo de uma linha reta em um ângulo escolhido (0° aponta para cima, 90° para a direita). Um gradiente radial faz as cores irradiarem de um ponto central em círculo ou elipse. Um gradiente cônico varre as cores ao redor de um ponto central como uma roda de cores, a partir de um ângulo escolhido. Os três são amplamente suportados em todos os navegadores modernos.
Quantos pontos de cor posso adicionar?
Quantos quiser, cada um com sua própria cor e posição (0-100%). A posição controla onde, ao longo do gradiente, aquela cor fica centralizada, permitindo criar transições nítidas (pontos próximos) ou misturas suaves (pontos espalhados).
Os predefinidos me prendem exatamente àquele gradiente?
Não. Clicar em um predefinido apenas carrega seu tipo, cores e pontos no editor como ponto de partida - todos os controles continuam totalmente editáveis depois, então você pode ajustar o ângulo, adicionar pontos ou mudar cores para deixá-lo do seu jeito.
Posso usar esse gradiente como imagem de fundo, e não só como fundo sólido?
Sim, o código gerado é um valor válido para as propriedades CSS background ou background-image. Funciona em qualquer lugar onde uma imagem de fundo seria usada, inclusive em camadas com uma imagem real usando uma lista background-image separada por vírgulas.