Generador de degradados mesh
Crea degradados mesh suaves y coloridos como los fondos de las apps y sitios web modernos. Arrastra los puntos de color, deforma las formas tipo aurora, añade grano de película y descarga un PNG de cualquier tamaño, desde un fondo de pantalla de teléfono hasta 8K, o copia el CSS.
Última actualización:
Arrastra los puntos · haz clic para seleccionar · doble clic en el lienzo para agregar un punto · las flechas mueven el punto seleccionado
Cómo usar Generador de degradados mesh
- Empieza con una paleta o pulsa el botón aleatorio hasta que te gusten los colores.
- Arrastra los puntos de color en el lienzo. Haz clic en un punto para seleccionarlo y cambiar su color; haz doble clic en el lienzo o pulsa Agregar punto para añadir más.
- Da forma a la mezcla con Suavidad (cuánto se extienden los colores) y Deformación (distorsión fluida tipo aurora). Activa Grano para un aspecto texturizado moderno.
- Elige el tamaño: selecciona un preset como 1920 × 1080 o 1080 × 1920, o escribe cualquier ancho y alto.
- Descarga el PNG o copia el CSS para usar el degradado en un sitio web.
Cómo se calcula el degradado mesh
Cada píxel es un promedio ponderado de todos los puntos de color. El peso de un punto disminuye suavemente con la distancia siguiendo una curva gaussiana: w = e−d² / (2σ²), donde d es la distancia del píxel al punto (medida en relación con el lado más corto de la imagen, para que las manchas sigan siendo redondas en imágenes anchas) y σ se define con el control Suavidad. El color final es Σ wᵢ·colorᵢ ÷ Σ wᵢ.
El promedio se calcula en el espacio de color OKLab en lugar de en RGB. OKLab está diseñado para que pasos iguales se vean igual de distintos a la vista, así que una mezcla de azul a amarillo pasa por verdes y cianes limpios en lugar de por un gris apagado. Deformación desplaza la posición de consulta de cada píxel con unas cuantas ondas senoidales suaves antes de medir la distancia, lo que curva los campos de color en cintas fluidas tipo aurora. Grano añade el mismo desplazamiento aleatorio de brillo a los canales rojo, verde y azul de cada píxel.
Tamaños habituales
| Uso | Tamaño (px) | Proporción |
|---|---|---|
| Fondo de escritorio, diapositiva, fondo de video | 1920 × 1080 / 2560 × 1440 / 3840 × 2160 | 16:9 |
| Publicación cuadrada de Instagram | 1080 × 1080 | 1:1 |
| Publicación vertical de Instagram | 1080 × 1350 | 4:5 |
| Historias, Reels, fondo de pantalla del teléfono | 1080 × 1920 | 9:16 |
| Vista previa de enlace Open Graph | 1200 × 630 | 1.91:1 |
| Encabezado de X (Twitter) | 1500 × 500 | 3:1 |
Consejos de diseño
- Usa de 4 a 6 puntos. Con menos parece un degradado simple; con muchos más se vuelve turbio.
- Combina un color oscuro y varios claros para dar profundidad, o quédate en tonos vecinos (colores análogos) para un aspecto tranquilo.
- Comprueba el contraste del texto. Si pones texto sobre el degradado, pruébalo con un verificador de contraste de color; el texto claro necesita las zonas más oscuras detrás.
- Añade un poco de grano (5 a 15%) a los fondos grandes para evitar bandas de color visibles en algunas pantallas.
- Prefiere el PNG en sitios web cuando deba coincidir exactamente. La versión CSS usa degradados radiales, que se parecen mucho pero no son idénticos; es diminuta y se adapta a cualquier pantalla.
Preguntas frecuentes
¿Qué es un degradado mesh?
Un degradado mesh mezcla varios colores colocados en distintos puntos de un área, de modo que los colores fluyen en dos dimensiones en lugar de a lo largo de una línea. Las herramientas de diseño los construyen sobre una cuadrícula de puntos de color; este generador coloca puntos libres y los mezcla con pesos suaves, lo que da el mismo aspecto suave y orgánico.
¿Cómo uso un degradado mesh en CSS?
CSS no tiene degradados mesh nativos, así que la exportación apila un radial-gradient por cada punto de color sobre un color base. En la mayoría de los casos se ve muy parecido al lienzo; para un resultado exacto al píxel, descarga el PNG y úsalo como background-image.
¿Por qué los colores se ven más suaves que en otras herramientas?
Los colores se mezclan en OKLab, un espacio de color perceptual diseñado para que las mezclas entre dos colores se vean uniformes. Mezclar en RGB simple tiende a crear zonas grises o marrones apagadas entre colores complementarios como el azul y el naranja.
¿Qué hace el grano?
El grano añade un ruido monocromo fino. Oculta las bandas de color en pantallas grandes, hace que el degradado parezca impreso o fotográfico y es un estilo popular en los sitios web modernos. Mantenlo entre el 5 y el 15% para una textura sutil.
¿Cuál es el tamaño máximo?
Hasta 8000 píxeles por lado y 40 megapíxeles en total, por ejemplo 7680 × 4320 (8K). Las imágenes grandes tardan unos segundos en renderizarse; el degradado se renderiza por franjas para que la página siga respondiendo.
¿Puedo usar los degradados con fines comerciales?
Sí. Las imágenes se generan en tu dispositivo a partir de tus propios ajustes, así que puedes usarlas en cualquier proyecto personal o comercial sin atribución.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.