Generador de mesh gradient
Elige hasta cinco colores y genera variaciones hasta que te guste. El fondo se hace con radial-gradient de CSS y también se puede descargar como imagen.
Cómo usarDegradados con varios colores
Disponible en: 
Generador de mesh gradient: para qué sirve
El mesh gradient es el degradado con varias manchas de color que se mezclan, muy usado en fondos de sitios web, presentaciones y publicaciones.
Aquí eliges de dos a cinco colores, mezclas las posiciones hasta que te guste y copias el CSS hecho con capas de radial-gradient, que el navegador dibuja sin descargar imágenes. Si prefieres, descárgalo en PNG en tamaños de pantalla, publicación, historia o imagen de enlace.
Cómo usar
- Elige los colores y el fondo.
- Toca mezclar de nuevo hasta que te guste la composición.
- Copia el CSS o descarga el PNG en el tamaño correcto.
Cuándo usar
- Fondo de la parte superior (hero) de un sitio.
- Portada de presentación o de publicación.
- Imagen de fondo para el celular.
Preguntas frecuentes
¿Qué es un mesh gradient?
Es un degradado con varias manchas de color que se mezclan en direcciones distintas, en lugar de ir de un lado al otro. Tiene un aspecto orgánico, como una aurora o tinta en el agua, y se usa mucho en fondos de sitios web y de presentaciones.
¿Cómo se hace en CSS?
Con varias capas de radial-gradient, cada una con un color en una posición y transparente en los bordes, sobre un color de fondo. El navegador dibuja todo, sin descargar imágenes.
¿Y el texto encima?
Elige colores con luminosidad parecida y pon el texto en un color que contraste con todos, o usa una capa semitransparente detrás del texto. Revisa el contraste antes de publicar.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.