Tiny Online Tools
Gradientes Mesh Renderizados como SVG Puro
Os gradientes mesh — fundos coloridos multiponto que parecem pintados com pincel — se tornaram icônicos pelas páginas de marketing da Stripe e da Linear. Este gerador produz o mesmo efeito como um SVG pequeno e autônomo, sem precisar de arquivo de imagem, WebGL ou canvas.
A Técnica
Em vez de usar um mesh gradient nativo (que CSS e SVG ainda não suportam totalmente), a ferramenta empilha vários gradientes radiais suaves. Cada gradiente desvanece de uma cor escolhida em um ponto (x, y) específico em direção à transparência. Empilhadas sobre um fundo sólido, essas poças radiais se misturam, imitando uma mesh pintada à mão.
A abordagem é muito portável: o SVG resultante usa apenas elementos padrão <radialGradient> e <rect> — sem filtros nem scripts — funcionando onde quer que SVG seja suportado.
Controles
- Pontos — 2 a 6 manchas de cor. Cada uma com sua cor e sliders X/Y.
- Suavidade — raio de cada gradiente radial. Baixa suavidade = cores compactas e vibrantes; alta = pastéis sutis.
- Fundo — cor sólida atrás das manchas.
- Rerrolar — aleatoriza as posições para inspiração instantânea mantendo sua paleta.
Usos
- Fundos hero para SaaS modernos
- Splash screens de apps
- Capas de podcast / música
- Mockups de produto e banners de marketing
- Fundos de blogs e sites de documentação
O SVG se estica a qualquer contêiner com preserveAspectRatio="none", então um único arquivo serve como fundo de largura total em qualquer breakpoint. Combine com os geradores Gradiente Granulado ou Textura de Ruído para um visual tátil e moderno.