Gerador de gradientes em malha

Crie fundos com gradientes em malha bonitos

Gerador de gradientes em malha

Pontos de cor

#F97316Posição: 20%, 30%

#E11D48Posição: 80%, 20%

#7C3AEDPosição: 50%, 80%

#06B6D4Posição: 10%, 70%

Tamanho da tela

CSS

background-color: #f97316;
background-image:
    radial-gradient(at 20% 30%, rgba(249,115,22,1) 0px, transparent 50%),
    radial-gradient(at 80% 20%, rgba(225,29,72,1) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(124,58,237,1) 0px, transparent 50%),
    radial-gradient(at 10% 70%, rgba(6,182,212,1) 0px, transparent 50%);

O que é Gerador de gradientes em malha?

Gere gradientes mesh multicoloridos para fundos de sites, gráficos de mídias sociais e designs de interface. Escolha as cores, posicione os pontos de controle e obtenha gradientes orgânicos que vão além de padrões lineares ou radiais simples.

Como usar

Escolha suas cores base clicando nas amostras de cor ou inserindo valores hexadecimais. Adicione ate 6 pontos de controle de cor.
Arraste os pontos de controle na tela para mudar o fluxo do gradiente.
Copie o CSS ou baixe o gradiente como PNG.

Resultado

Um designer de UI cria um gradiente mesh de roxo para turquesa com 4 pontos de controle para a secao hero de uma landing page e depois copia o CSS para colar diretamente em sua folha de estilos.

Ferramentas relacionadas

Conversor de códigos de cor

Converta códigos de cor HEX, RGB, HSL e CMYK

Conversor de cores

Converta códigos HEX, RGB, HSL, HSV e CMYK

Misturador de cores

Misture duas cores visualmente

Identificador de nome de cor

Encontre a cor nomeada mais próxima de qualquer valor

Localizador de cores complementares

Encontre cores complementares para qualquer entrada

Explorador de cores de marca

Explore as cores de marcas populares