Ayuda

Mesh gradient generator con CSS y SVG

Elige de 2 a 8 colores y este mesh gradient generator los mezcla en un fondo suave y continuo que moldeas arrastrando los puntos de color. Con Copiar CSS obtienes un degradado de malla en CSS que funciona en cualquier navegador moderno, y con Descargar SVG un archivo de 1600 × 1200 que se escala a cualquier tamaño. Todo se ejecuta en tu navegador, sin WebGL, sin subir nada y sin cuenta.

Degradado con varios colores, paso a paso

Mira la vista previa. Los pequeños puntos redondos que ves son los puntos de color, uno por cada mancha de color de la malla.
Pulsa Aleatorio para obtener una paleta y una disposición nuevas al azar, tantas veces como quieras, hasta que algo se parezca a lo que buscas.
Abre la fila Colores y haz clic en una muestra para elegir tu propio color. Con Añadir color sumas más (hasta 8) y con la pequeña x de una muestra quitas una (hasta quedarte con 2).
Mueve el control deslizante Complejidad, de 2 a 6, para cambiar cuántos puntos de color tiene la malla.
Arrastra un punto para moverlo, con el ratón o con el dedo. Con el teclado, selecciona un punto y pulsa las teclas de flecha; mantén Shift para dar pasos más grandes.
Pulsa Copiar CSS o Descargar SVG cuando la vista previa te convenza. Un aviso breve, Copiado o Guardado, lo confirma.

La vista previa se actualiza con cada cambio, y el cuadro Código CSS muestra siempre el CSS de lo que ves. Al cambiar la complejidad o pulsar «Aleatorio», los puntos se recolocan, así que los que hubieras arrastrado vuelven a posiciones nuevas.

Qué hace la complejidad

La complejidad crea una cuadrícula de complejidad × complejidad puntos de color, y cada punto recibe un color de tu paleta. Más puntos dan una malla más variada, con manchas más pequeñas; menos puntos dan lavados amplios y sencillos.

Complejidad 2: 4 puntos, cada mancha ocupa el 65 % del lienzo
Complejidad 3: 9 puntos, 43 %
Complejidad 4: 16 puntos, 33 %
Complejidad 5: 25 puntos, 26 %
Complejidad 6: 36 puntos, 22 %

Un detalle: los colores se reparten entre los puntos, así que una paleta puede tener más colores que puntos la malla. Con complejidad 2 solo hay 4 puntos, de modo que una paleta de 6 colores muestra como máximo 4 a la vez. Sube la complejidad para que entren los demás.

Mesh gradient CSS para pegar

El cuadro Código CSS contiene dos declaraciones: un background-color (la media de tu paleta, para que ninguna esquina quede vacía) y un background-image que apila un radial-gradient() por cada punto de color. Es CSS corriente, sin archivo de imagen ni script.

Cada capa pasa de un color sólido en el centro a totalmente transparente en el borde, y las capas se solapan, que es lo que funde los colores. El tamaño y la posición van en porcentajes, así que el degradado se estira para ajustarse al elemento donde lo apliques. Si buscas un generador de degradados en CSS, este te da el código listo para copiar.

Mesh gradient SVG: la descarga

Descargar SVG guarda degradado-malla.svg. El archivo tiene un viewBox de 1600 × 1200, un rectángulo base del mismo color medio y un radialGradient por cada punto de color. Como es vectorial, se mantiene nítido como fondo de pantalla del teléfono, fondo de diapositiva o imagen para redes sociales. En un marco que no sea 4:3 rellena el marco y recorta los bordes en lugar de deformarse.

Si necesitas un PNG, abre el SVG en un navegador o en un editor que lea SVG y expórtalo con el tamaño que quieras.

Un generador de fondos degradados para tu proyecto

Web o sección principal: pega el CSS en la regla de ese elemento. El texto sobre una mezcla de colores muy cargada puede costar de leer, así que pruébalo con el Comprobador de contraste de color.
Diapositivas, fondos de pantalla y publicaciones: descarga el SVG y colócalo o expórtalo desde tu aplicación de diseño.
Para ajustarte a una marca: haz clic en una muestra y elige tu propio color. El Selector de color de imagen puede sacar antes un color de una foto o un logotipo.

Ambas salidas son una instantánea de la vista previa actual. Si vuelves a pulsar el botón aleatorio, copia o descarga de nuevo para obtener la nueva.

Preguntas frecuentes

¿Hay un mesh gradient generator que dé el CSS?

Sí, este. El cuadro «Código CSS» muestra un background-color más un background-image formado por capas radial-gradient() apiladas, una por punto de color. Es CSS estándar, sin JavaScript ni archivo de imagen, y funciona en cualquier navegador moderno. Pulsa «Copiar CSS» y pégalo en una hoja de estilos o en un atributo style.

¿Puedo descargar un degradado de malla como SVG?

Sí. «Descargar SVG» guarda un archivo con un viewBox de 1600 × 1200. Está hecho de capas radialGradient, así que se ve nítido a cualquier tamaño. En un marco que no sea 4:3 rellena el marco y recorta los bordes en lugar de deformarse.

¿Cómo uso un degradado con varios colores como fondo de una web?

Copia el CSS y pega las dos declaraciones en la regla del elemento que quieras colorear, como una sección principal o el body. Las manchas se colocan en porcentajes, así que se estiran con el elemento. Comprueba que tu texto se lee bien sobre los colores que has elegido.

¿Puedo sacar el degradado en PNG?

No directamente: esta herramienta exporta CSS y SVG, no PNG. Abre el SVG descargado en un navegador o en un editor que lea SVG, y expórtalo o haz una captura con el tamaño en píxeles que necesites.

¿Se puede animar el mesh gradient?

No. La herramienta crea un único degradado estático: puedes arrastrar los puntos y cambiar los colores, pero el CSS y el SVG que exporta no se mueven.

¿Es lo mismo que la malla de degradado de Illustrator?

No. La malla de degradado de Illustrator es una cuadrícula de parches vectoriales editables. Este generador mezcla degradados radiales suaves y solapados, uno por punto de color, lo que da un aspecto suave y multicolor parecido, pero se exporta como CSS o SVG sencillos.