Degradado de una foto
Crea un degradado mesh suave con varios colores o toma la paleta de tu propia foto. Mueve los puntos de color directamente en el lienzo, añade distorsión y grano, descarga la imagen o copia el CSS.
Tu navegador no admite WebGL, así que la herramienta no puede iniciarse. Prueba con otro navegador o activa la aceleración por hardware.
Pasa el ratón por el lienzo para ver los puntos de color: arrástralos; con doble clic añades un color. Suelta una foto en el lienzo o pégala desde el portapapeles.Arrastra los puntos de color con el dedo; toca dos veces para añadir un color.
Los colores siguen el orden de la lista. Para invertirlo, usa el botón "Orden inverso".
CSS
Exacto para lineal, radial y cónico. Para mesh y mosaico es un fondo parecido hecho de manchas radiales, sin distorsión ni grano.
Tu degradado en un minuto
- 1Elige los coloresde la paleta, al azar o de tu foto
- 2Mueve los puntosy ajusta la distorsión y el grano
- 3DescargaPNG, JPG, WebP, SVG o copia el CSS
Qué son estos degradados
Un degradado mesh se forma con varios puntos de color: cada uno tiñe la zona que lo rodea y entre ellos los colores se funden suavemente. Estos fondos están detrás de portadas, banners, historias y pantallas de apps. El control "Suavidad" decide cuánto se mezclan los colores, y "Mosaico" divide el lienzo en zonas según el punto más cercano. Lineal, radial y cónico son degradados clásicos que se trasladan con exactitud a CSS.
Paleta de una foto
Sube una foto y la herramienta encontrará hasta siete colores principales y colocará los puntos donde viven esos colores en la imagen. Así el degradado repite el ambiente de la foto: un atardecer, el mar, un interior, el envase de un producto. La foto se queda en tu navegador y no se envía a ningún sitio.
Distorsión y grano
La distorsión desplaza los colores siguiendo un patrón: ondas, ruido suave, celdas o un remolino alrededor del centro. "Fuerza" indica cuánto, "Escala del patrón" indica su tamaño y el botón del dado da otro patrón aleatorio. El grano añade una ligera textura como de película: con él el degradado no parece plástico y no deja bandas en las pantallas. En "Ajustar todos los colores" puedes cambiar de una vez el tono, la saturación y el brillo de toda la paleta.
Prueba también
También gratis y sin registro
Preguntas frecuentes
¿No encuentras la respuesta? Escríbenos y te ayudamos.
En el indicado en los campos W y H, hasta 4096 píxeles en el lado mayor (límite de la tarjeta gráfica en el navegador). Hay tamaños listos para post, historia, cabecera de X, vista previa de enlace y fondo de pantalla. En pantalla se muestra una copia reducida con las mismas proporciones.
PNG no tiene pérdidas y es mejor para diseño. JPG y WebP pesan menos y van bien para redes sociales y webs. El SVG de un degradado lineal o radial sin distorsión ni grano es un vector real que puedes editar en Figma; para degradados mesh y distorsiones el SVG contiene una imagen, porque no existe formato vectorial para esos degradados.
Para lineal, radial y cónico, sí. El degradado mesh en CSS se forma con varias manchas radiales y se parece, pero sin distorsión ni grano: los navegadores no pueden dibujarlos con CSS normal. Si necesitas exactamente ese fondo, usa el PNG.
La foto se reduce y todos sus píxeles se agrupan por similitud de color (método k-means). Los centros de los grupos se convierten en los colores de la paleta y el punto de cada color se coloca donde ese color aparece más en la imagen. Los colores demasiado raros se descartan.
Sí. Pulsa el cuadrado de color para abrir el selector o escribe un código HEX en el campo de al lado. Puede haber de 2 a 12 colores. La cruz elimina un color, el más añade uno nuevo y un doble clic en el lienzo pone un punto nuevo justo ahí.
Pulsa "Enlace al degradado": el enlace se copia y abre el mismo degradado con todos los colores, puntos y ajustes. Además, el último degradado se guarda en tu navegador y se abre en tu próxima visita. Si te equivocas, deshaz el paso con el botón de la flecha o con Ctrl+Z.
En pantalla se muestra una copia reducida y el archivo se genera a tamaño completo, por eso el grano y los detalles finos de la distorsión son más pequeños en el archivo. Los colores y la posición de los puntos coinciden.
Sí, sin restricciones: es tu imagen. La foto de la que se tomó la paleta no sale de tu navegador y una paleta de colores no está protegida por derechos de autor.