Gradiente de uma foto
Monte um gradiente mesh suave com várias cores ou pegue a paleta da sua própria foto. Arraste os pontos de cor direto na tela, adicione distorção e granulação, baixe a imagem ou copie o CSS.
Seu navegador não suporta WebGL, então a ferramenta não pode iniciar. Tente outro navegador ou ative a aceleração de hardware.
Passe o mouse sobre a tela para ver os pontos de cor: arraste-os; clique duas vezes para adicionar uma cor. Solte uma foto na tela ou cole da área de transferência.Arraste os pontos de cor com o dedo; toque duas vezes para adicionar uma cor.
As cores seguem a ordem da lista. Para invertê-la, use o botão "Ordem inversa".
CSS
Exato para linear, radial e cônico. Para mesh e mosaico é um fundo parecido feito de manchas radiais, sem distorção e granulação.
Seu gradiente em um minuto
- 1Escolha as coresda paleta, ao acaso ou da sua foto
- 2Mova os pontose ajuste a distorção e a granulação
- 3BaixePNG, JPG, WebP, SVG ou copie o CSS
O que são esses gradientes
Um gradiente mesh é montado com vários pontos de cor: cada um tinge a área ao redor e, entre eles, as cores se fundem suavemente. Esses fundos aparecem em capas, banners, stories e telas de apps. O controle "Suavidade" define o quanto as cores se misturam, e "Mosaico" divide a tela em zonas pelo ponto mais próximo. Linear, radial e cônico são gradientes clássicos que vão para o CSS com exatidão.
Paleta de uma foto
Envie uma foto e a ferramenta encontra até sete cores principais e coloca os pontos onde essas cores vivem na imagem. Assim o gradiente repete o clima da foto: um pôr do sol, o mar, um interior, a embalagem de um produto. A foto fica no seu navegador e não é enviada a lugar nenhum.
Distorção e granulação
A distorção desloca as cores seguindo um padrão: ondas, ruído suave, células ou um redemoinho em torno do centro. "Força" define o quanto, "Escala do padrão" define o tamanho e o botão do dado dá outro padrão aleatório. A granulação adiciona uma leve textura de filme: com ela o gradiente não parece plástico e não cria faixas nas telas. Em "Ajustar todas as cores" você muda de uma vez o matiz, a saturação e o brilho de toda a paleta.
Experimente também
Também grátis e sem cadastro
Perguntas frequentes
Não encontrou a resposta? Fale com a gente que ajudamos.
No tamanho dos campos W e H, até 4096 pixels no lado maior (limite da placa de vídeo no navegador). Há tamanhos prontos para post, story, capa do X, prévia de link e papel de parede. Na tela aparece uma cópia reduzida com as mesmas proporções.
PNG é sem perdas, melhor para design. JPG e WebP são mais leves, bons para redes sociais e sites. O SVG de um gradiente linear ou radial sem distorção e granulação é um vetor de verdade que você pode editar no Figma; para gradientes mesh e distorções o SVG contém uma imagem, porque não existe formato vetorial para esses gradientes.
Para linear, radial e cônico, sim. O gradiente mesh em CSS é montado com várias manchas radiais e fica parecido, mas sem distorção e granulação: os navegadores não conseguem desenhá-las com CSS comum. Se precisar do fundo idêntico, use o PNG.
A foto é reduzida e todos os pixels são agrupados por semelhança de cor (método k-means). Os centros dos grupos viram as cores da paleta, e o ponto de cada cor é colocado onde essa cor mais aparece na imagem. Cores raras demais são descartadas.
Sim. Clique no quadrado de cor para abrir o seletor ou digite um código HEX no campo ao lado. Pode haver de 2 a 12 cores. O X remove uma cor, o mais adiciona uma nova, e um clique duplo na tela coloca um ponto novo bem ali.
Clique em "Link do gradiente": o link é copiado e abre o mesmo gradiente com todas as cores, pontos e ajustes. Além disso, o último gradiente fica salvo no seu navegador e abre na próxima visita. Errou? Desfaça o passo com o botão da seta ou com Ctrl+Z.
Na tela aparece uma cópia reduzida, e o arquivo é gerado em tamanho real, por isso a granulação e os detalhes finos da distorção ficam menores no arquivo. As cores e as posições dos pontos são as mesmas.
Sim, sem restrições: a imagem é sua. A foto de onde a paleta foi tirada não sai do seu navegador, e uma paleta de cores não é protegida por direitos autorais.