Tiny Online Tools
Gradientes de Malla Renderizados como SVG Puro
Los gradientes de malla —fondos coloridos de múltiples puntos que parecen pincelados— se hicieron icónicos a través de las páginas de marketing de Stripe y Linear. Este generador produce el mismo efecto como un SVG pequeño e independiente, sin necesidad de un archivo de imagen, WebGL o canvas.
La Técnica
En lugar de usar un gradiente de malla nativo (que CSS y SVG aún no soportan por completo), la herramienta apila varios gradientes radiales suaves. Cada gradiente se desvanece desde un color elegido en un punto (x, y) específico hacia transparencia. Apilados sobre un fondo sólido, estas piscinas radiales se sangran entre sí imitando una malla pintada a mano.
El enfoque es muy portable: el SVG resultante usa solo elementos estándar <radialGradient> y <rect>, sin filtros ni scripts, por lo que funciona donde sea que se soporte SVG.
Controles
- Puntos — 2 a 6 manchas de color. Cada una tiene su propio color y deslizadores X e Y.
- Suavidad — el radio de cada gradiente radial. Baja suavidad mantiene los colores concentrados y vibrantes; alta suavidad los esparce en pasteles suaves.
- Fondo — color sólido de respaldo detrás de las manchas.
- Volver a lanzar — aleatoriza las posiciones para inspiración instantánea manteniendo tu paleta.
Usos
- Fondos hero para SaaS modernos
- Pantallas de inicio de apps
- Portadas de pódcast / música
- Mockups de producto y banners de marketing
- Fondos de blogs y sitios de documentación
El SVG se estira a cualquier contenedor con preserveAspectRatio="none", así un solo archivo sirve como fondo a ancho completo en cualquier breakpoint. Combínalo con los generadores Gradiente Granulado o Textura de Ruido para un look táctil y moderno.