Generador de degradados de malla

Crea un fondo multicolor suave a partir de 4, 6 o 9 puntos móviles. Elige cada color, arrastra los puntos sobre el lienzo, prueba una paleta aleatoria seleccionada y exporta el diseño en SVG o PNG. También puedes copiar una aproximación en CSS formada por degradados radiales superpuestos. El proyecto permanece en esta pestaña mientras trabajas.

Cómo crear un degradado con aspecto de malla

  1. 1

    Elige la cuadrícula

    Empieza con 4, 6 o 9 puntos de control. Cuantos más puntos haya, más zonas de color podrás definir.

  2. 2

    Selecciona los colores

    Usa el selector de cada punto. El editor guarda colores HEX de seis dígitos.

  3. 3

    Mueve los puntos

    Arrástralos, escribe su posición horizontal y vertical o usa las teclas de flecha.

  4. 4

    Elige el tamaño

    Selecciona un formato apaisado, panorámico o cuadrado para los archivos SVG y PNG.

  5. 5

    Exporta el diseño

    Descarga un PNG o SVG, o copia la aproximación CSS con degradados radiales.

Cómo se generan los tres resultados

  • PNG usa la misma interpolación de colores según la distancia que la vista previa. Si el formato elegido tiene otra proporción, los mismos puntos relativos se adaptan a las nuevas dimensiones.
  • SVG coloca degradados radiales superpuestos en los mismos puntos de control y se puede ampliar sin perder nitidez.
  • CSS crea una capa radial-gradient() por punto sobre un color base, sin necesitar un archivo de imagen aparte.

SVG y CSS utilizan los mismos datos del proyecto, pero son aproximaciones ligeras al aspecto de una malla. Sus píxeles no serán idénticos a los del PNG.

Consejos para la paleta

  • Los tonos próximos suelen producir transiciones suaves.
  • Los tonos opuestos marcan más los límites entre regiones.
  • Las paletas aleatorias sirven como punto de partida, no garantizan que el texto sea legible.
  • Comprueba el contraste de cualquier texto, icono o control que coloques encima.

Colocación de los puntos

Arrastra un punto numerado sobre la vista previa o enfócalo y usa las flechas. Mantén Mayús pulsado para desplazarlo cinco puntos porcentuales. Los campos horizontal y vertical permiten introducir una posición exacta.

Los puntos pueden llegar al borde. Si juntas varios, concentrarás sus colores en una zona; si los separas, cada color ocupará más espacio.

Usos habituales

  • Fondos de cabecera y separadores de secciones.
  • Tarjetas para redes sociales y miniaturas de vídeo.
  • Fondos para presentaciones e ilustraciones.
  • Pantallas de inicio y paneles decorativos.

El PNG es la opción más fiel a la vista previa. Usa SVG si necesitas ampliar el diseño o CSS si prefieres un fondo editable sin archivo de imagen.

Privacidad y almacenamiento

Los colores, las posiciones y la resolución se guardan en la memoria del navegador y en sessionStorage. No se añaden a las URL del embudo ni al estado del servidor. La herramienta puede registrar que se realizó una exportación, pero nunca incluye los valores del proyecto.

El proyecto se puede restaurar desde sessionStorage durante un máximo de seis horas mientras la pestaña permanezca abierta. Al cerrarla suele eliminarse antes, así que descarga o copia todo lo que quieras conservar.

Preguntas frecuentes

Usan métodos distintos. PNG mezcla los píxeles según la distancia, mientras que SVG y CSS superponen degradados radiales. Comparten colores y posiciones, pero no son idénticos píxel a píxel.

Sí. Arrastra un punto, usa sus campos de posición o enfócalo y pulsa las flechas. Mantén Mayús para dar pasos mayores.

El editor guarda colores HEX de seis dígitos. Usa el selector o convierte primero el color RGB o HSL a HEX.

No. El CSS copiado aproxima el efecto mediante varios degradados radiales estándar.

Se puede restaurar desde sessionStorage durante un máximo de seis horas en la pestaña actual. Al cerrarla suele eliminarse antes. El proyecto no se envía al servidor ni se añade a las URL del embudo.

Herramientas relacionadas