Degradado CSS a partir de una imagen

Importe una foto o una ilustración: se extraen sus colores dominantes y se ensamblan automáticamente en un degradado CSS linear-gradient listo para copiar. Procesamiento 100% local en su navegador (WebAssembly): su imagen nunca se envía a un servidor.

Arrastre y suelte una imagen aquí, o haga clic para examinar. 25 MB como máximo.

Cómo funciona

Recuperar el ambiente cromático de una foto para el fondo de una sección, un banner o una tarjeta de producto sin duplicar la imagen en sí: eso es exactamente lo que hace esta herramienta. Analiza los píxeles de la imagen importada para extraer los tonos más representados y los ensambla por orden en un degradado lineal cuyo ángulo puede ajustar antes de copiar la propiedad CSS final.

¿El degradado mantiene el mismo orden de colores que la imagen?

Los colores se ordenan del más frecuente al menos frecuente en la imagen de origen, y el degradado los encadena en ese orden. Si el resultado no le convence visualmente, puede copiar el código y reordenar los colores manualmente en su hoja de estilos.

¿Cuántos colores elegir para un resultado limpio?

Dos o tres colores suelen dar un degradado legible y elegante, similar al fondo de una sección clásica. Con más de cuatro colores, el resultado puede parecerse más a un arcoíris que a un degradado sutil, algo que conviene reservar para efectos deliberadamente marcados.

Privacidad: la extracción de los colores y la generación del CSS se realizan íntegramente en su navegador mediante WebAssembly, sin subir su imagen a ningún servidor.