Gerador de Gradiente a partir de Imagem
Extraia um gradiente bonito de qualquer fotografia — largue uma imagem, escolha um mood e as cores dominantes tornam-se pontos de gradiente arrastáveis. Copie CSS pronto a colar instantaneamente.
Arraste e largue uma imagem aqui
ou clique para procurar — também pode colar da área de transferência
Tudo corre no seu browser — a sua imagem nunca é enviada, sem registo, completamente gratuito.
background: —;
Sobre Gerador de Gradiente a partir de Imagem
O Gradient Generator from Image transforma qualquer fotografia num gradiente CSS pronto a usar. Arraste, procure ou cole uma imagem e a ferramenta lê-a numa tela (canvas), extrai as suas cores dominantes e organiza-as como pontos de paragem de gradiente que pode arrastar, recolorir e reordenar até a mistura combinar com o sentimento da imagem original.
Um seletor de interpretação — Colorida, Clara, Suave, Profunda ou Escura — altera quais as cores extraídas que se tornam pontos de paragem, pelo que uma única fotografia pode gerar vários gradientes muito diferentes. Controla o tipo de gradiente (linear, radial ou cónico), o ângulo e os próprios pontos de paragem: clique na barra para adicionar um, arraste para reposicionar, e inverta ou rode com um clique.
Todo o processo é executado no seu navegador; a sua imagem nunca é enviada para um servidor. Quando a pré-visualização estiver ao seu gosto, copie a regra CSS completa, apenas o valor de fundo, ou as cores extraídas isoladamente — ideal para secções hero, fundos de página e visuais de marca derivados de fotografia.
Como usar Gerador de Gradiente a partir de Imagem
- Arraste e largue uma imagem, clique para procurar, ou cole uma a partir da sua área de transferência.
- Escolha uma interpretação — Colorida, Clara, Suave, Profunda ou Escura — para decidir quais as cores extraídas que se tornam pontos de paragem.
- Selecione o tipo de gradiente (linear, radial ou cónico) e ajuste o ângulo.
- Arraste os pontos de paragem de cor para afinar a mistura; adicione, remova, inverta ou reorganize pontos conforme necessário.
- Clique em "Copiar CSS" para obter o código do gradiente pronto a colar.