Gerador de gradientes

Crie um gradiente, ajuste as cores e a direção e copie o CSS. Você também pode começar com um dos 60 modelos.

Direção do gradiente

Clique para adicionar, arraste para mover e dê dois cliques para remover.

Estúdio de cores Escolha e extraia cores, crie paletas e degradês, e verifique o contraste. Seletor de cores Escolha uma cor e obtenha seus valores HEX, RGB ou HSL. Gerador de paletas de cores Crie, ajuste e exporte um conjunto de cores. Verificador de contraste Confira a legibilidade do texto sobre um fundo. Seletor de cores de imagem Escolha um tom ou extraia cores de uma imagem. Conversor de imagens Converta imagens, inclusive de vários formatos no mesmo lote.

Suas estatísticas

0
Cores escolhidas
0
Paletas exportadas
0
Gradientes criados
0
Contrastes verificados
Seletor de cores
Modo mais usado
0%
Pontuação de atividade

Como criar um gradiente CSS

Guias

O vídeo mostra a interface em inglês.

Linear mistura as cores em linha reta, Radial a partir de um centro e Cônico ao redor de um centro. Escolha Multiponto para várias áreas de cor. Use um modelo rápido para começar com cores já escolhidas.

Crie um fundo com gradiente CSS

Quatro tipos de gradientes

Crie fundos lineares, radiais ou cônicos. Para uma mistura multiponto, sobreponha áreas radiais de cor.

60 modelos iniciais

Busque um modelo na biblioteca e aplique. Depois ajuste as cores e posições ao seu design.

Pontos de cor

Gradientes lineares, radiais e cônicos aceitam até seis pontos de cor. Gradientes multiponto permitem até dez pontos.

Mostrar mais 3Mostrar menos

Código CSS e SCSS

Copie um fundo CSS ou uma variável SCSS. Depois de mudar a direção ou as posições, confira o resultado na sua folha de estilos.

Limites dos formatos de exportação

O Tailwind simplifica o gradiente para uma versão linear. O SVG substitui designs cônicos e multiponto por um gradiente linear. Por isso, esses formatos podem diferir da prévia.

Outras ferramentas de cores

O seletor de modo abre páginas específicas para escolher cores, extrair cores de imagens, criar paletas e verificar contraste.

Perguntas frequentes

Como criar um gradiente CSS?

Escolha um tipo ou modelo, ajuste as cores e posições e copie o fundo CSS. Cole na sua folha de estilos e confira no navegador em que seu design será usado.

Quais tipos de gradientes posso criar?

Lineares, radiais, cônicos e multiponto. As misturas multiponto sobrepõem gradientes radiais a uma cor de base, sem uma função CSS específica para esse tipo.

Posso criar gradientes cônicos ou do tipo malha?

Sim. Gradientes cônicos distribuem as cores ao redor de um centro. Os multiponto sobrepõem áreas radiais para criar um fundo do tipo malha. Use CSS para preservar esses tipos.

Quantas pontos posso adicionar?

Gradientes lineares, radiais e cônicos permitem até seis pontos de cor. Os multiponto permitem até dez pontos. Você pode mudar a cor e a posição de cada um.

Mostrar mais 4Mostrar menos

Todas as exportações correspondem à prévia?

O Tailwind simplifica o design para um gradiente linear. O SVG substitui gradientes cônicos e multiponto por lineares. PNG e JPG têm 1200 × 600 pixels, então suas proporções e misturas de cor podem diferir da prévia CSS. Use CSS para manter o tipo de gradiente escolhido.

Há modelos prontos para usar?

Sim. Explorar biblioteca abre uma biblioteca com 60 modelos dos quatro tipos. Você pode buscar um modelo, aplicar como ponto de partida e editar.

O gerador de gradientes é gratuito?

Sim, o MORELESS oferece a ferramenta sem conta. Os cálculos e a geração de código acontecem no navegador.

Como abrir as outras ferramentas de cores?

Use o seletor de modo acima dos controles do gradiente. Ele abre páginas específicas para escolher cores, extrair cores de imagens, criar paletas e verificar contraste.

Detalhes técnicos

Fundos CSS

O CSS usa linear-gradient(), radial-gradient() ou conic-gradient() com as cores e suas posições. O mecanismo CSS do navegador desenha a prévia. Confira o código copiado na sua folha de estilos.

Misturas multiponto

Um gradiente multiponto sobrepõe funções radial-gradient() a uma cor de base. Cada ponto tem uma cor e uma posição em dois eixos. Não existe uma função CSS multipoint-gradient().

Mostrar mais 2Mostrar menos

Limites da exportação de código

O SCSS coloca o gradiente em uma variável. O Tailwind usa uma direção linear simplificada e parte das cores. O SVG aceita gradientes lineares e radiais e substitui os tipos cônicos e multiponto por lineares.

Limites da exportação de imagens

PNG e JPG são gerados com Canvas em 1200 × 600 pixels, com as cores atuais e os ajustes disponíveis de ângulo, centro ou posição dos pontos. As proporções fixas e a mistura de cores podem diferir da prévia CSS. A exportação de imagens cônicas exige suporte do Canvas a gradientes cônicos.