Gradiente a partir de uma 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 Gradiente a partir de uma 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 Gradiente a partir de uma 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.