Gradiente CSS a partir de uma imagem
Importe uma foto ou ilustração: suas cores dominantes são extraídas e montadas automaticamente em um gradiente CSS linear-gradient pronto para copiar. Processamento 100% local no seu navegador (WebAssembly) — sua imagem nunca é enviada a um servidor.
Como funciona
Reaproveitar o clima de cores de uma foto para um fundo de seção, um banner ou um cartão de produto sem duplicar a própria imagem: é exatamente isso que esta ferramenta faz. Ela analisa os pixels da imagem importada para extrair os tons mais representados e depois os monta em ordem em um gradiente linear, cujo ângulo você pode ajustar antes de copiar a propriedade CSS final.
O gradiente mantém a mesma ordem de cores da imagem?
As cores são classificadas da mais frequente para a menos frequente na imagem de origem, e o gradiente as encadeia nessa ordem. Se o resultado não agradar visualmente, você pode copiar o código e reordenar as cores manualmente na sua folha de estilos.
Quantas cores escolher para um resultado limpo?
Duas ou três cores costumam dar um gradiente legível e elegante, próximo de um fundo de seção clássico. Acima de quatro cores, o resultado pode ficar mais parecido com um arco-íris do que com um gradiente sutil, algo a reservar para efeitos propositalmente marcantes.
Privacidade: a extração das cores e a geração do CSS são feitas inteiramente no seu navegador via WebAssembly, sem upload da sua imagem para um servidor.