Saltar al contenido

Generador de Gradientes de Malla y Fondos Fluidos

Crea gradientes suaves con puntos de control interactivos, semillas aleatorias y exportación en 4K.

Generador de Gradientes de Malla y Fondos Fluidos

Generador 100% en el Navegador

Crea gradientes suaves con puntos de control interactivos, semillas aleatorias y exportación en 4K.

Ajustes Preestablecidos

Controles de Gradiente de Malla

Personaliza la semilla, los puntos de control, el desenfoque y el color base en tiempo real.

Cantidad de Puntos: 4 / 6

Personaliza la semilla, los puntos de control, el desenfoque y el color base en tiempo real.

Se requiere un mínimo de 4 puntos de control.

50 px
px

Personaliza la semilla, los puntos de control, el desenfoque y el color base en tiempo real.

#0f172a

Personaliza la semilla, los puntos de control, el desenfoque y el color base en tiempo real.

Punto Seleccionado

point-1

21 %
%

Personaliza la semilla, los puntos de control, el desenfoque y el color base en tiempo real.

34 %
%

Personaliza la semilla, los puntos de control, el desenfoque y el color base en tiempo real.

#2beeb3

Personaliza la semilla, los puntos de control, el desenfoque y el color base en tiempo real.

Lienzo de Gradiente en Vivo
Lienzo Interactivo

Arrastra los puntos o usa las flechas del teclado / controles deslizantes para reposicionar.

1
2
3
4

Exportar y Descargar

background-color: #0f172a;
background-image:
    radial-gradient(at 21% 34%, #2beeb3 0px, transparent 55%),
    radial-gradient(at 73% 26%, #3c5bf6 0px, transparent 55%),
    radial-gradient(at 37% 67%, #ea62ad 0px, transparent 55%),
    radial-gradient(at 68% 70%, #f6ec60 0px, transparent 55%);
filter: blur(50px);
Resolución de Exportación

Fondo PNG de Alta Resolución

How CSS Mesh Gradients and Layered Radial Gradients Work

Mesh gradients create organic, fluid color transitions by blending multiple independent color nodes across a two-dimensional surface. Rather than restricting colors to linear or conical paths, mesh gradients distribute radial color fields from customized focal points with smooth transparent falloffs.

Mathematical Foundation of Seeded PRNG Generation

Deterministic generation uses a pseudo-random number generator (Mulberry32 PRNG) initialized with a 32-bit unsigned integer seed. Every execution with the same seed reproduces the exact spatial coordinates, color distributions, and layer hierarchies without variance:

s = (s + 0x6D2B79F5) >>> 0;
t = Math.imul(s ^ (s >>> 15), 1 | s);
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;

Multi-Resolution Client-Side Canvas Rasterization

Exported PNGs are rendered directly on client-side HTML5 2D canvas surfaces at full device resolutions: 1080p Full HD (1920×1080), 2K Quad HD (2560×1440), and 4K Ultra HD (3840×2160). Because all rendering occurs strictly within your local browser sandbox without requesting external assets, exported canvases remain completely untainted and 100% private.

Frequently Asked Questions

¿Cómo funcionan los gradientes de malla CSS puros sin imágenes?
Los gradientes de malla CSS se crean superponiendo múltiples declaraciones radial-gradient() con desvanecimiento transparente sobre un color base. Combinados con filtro de desenfoque CSS, forman transiciones orgánicas fluidas.
¿Qué es la generación determinista con semilla?
El algoritmo PRNG Mulberry32 utiliza un número de semilla para calcular exactamente las coordenadas espaciales y la armonía de color de cada punto. Ingresar la misma semilla siempre reproduce el mismo diseño.
¿Los fondos 4K se generan localmente en mi navegador?
Sí. El generador dibuja los gradientes radiales y aplica los filtros en un lienzo HTML5 Canvas local a resoluciones de hasta 3840×2160 sin subir nada a ningún servidor.
¿Puedo usar los gradientes generados para proyectos comerciales?
Sí. Todo el código CSS y las imágenes PNG exportadas son completamente libres de regalías y aptos para sitios web comerciales y aplicaciones móviles.