Central de Conhecimento e Guia
Gerador de Gradientes Mesh em CSS e Fundos Fluidos
Gerador de Gradientes Mesh em CSS e Fundos Fluidos
Esta ferramenta opera 100% do lado do cliente. Seus códigos, tokens, credenciais e dados confidenciais nunca saem do seu navegador nem são transmitidos a servidores remotos.
Fórmula e Método de Cálculo
Mesh = background-image: radial-gradient(at [X] [Y], [Color], transparent), ...
CSS mesh gradients are actually an optical illusion created by stacking multiple distinct `radial-gradient` layers on top of each other and allowing their translucent edges to bleed together.
Melhores Práticas e Dicas
- Limit Color Nodes for Performance: Stacking 15 radial gradients on a single element forces the browser GPU to calculate massive matrix overlays on every frame. Keep it under 6 nodes for smooth 60fps scrolling on mobile.
- Use Analogous Colors: A mesh gradient looks terrible if you blend complementary colors (like pure Red and pure Green), resulting in a muddy brown center. Stick to adjacent colors on the color wheel (e.g., Blue, Purple, Pink).
- Animate with CSS Variables: You cannot cleanly transition the raw `background-image` property. To animate a mesh gradient, bind the X/Y coordinates to CSS custom properties (variables) and animate those using `@keyframes`.
Perguntas Frequentes
Por que o gradiente está apresentando faixas (banding) no meu monitor?
O efeito de faixas (banding) ocorre quando os monitores não possuem profundidade de bits suficiente para exibir a transição suave entre duas cores semelhantes. Adicionar uma sobreposição de ruído CSS (granulação) sutil corrige instantaneamente o banding por meio de dithering dos pixels.
Posso salvar isso como PNG em vez de CSS?
Embora o CSS puro seja infinitamente escalável e use zero largura de banda, se o gradiente for complexo demais para GPUs móveis, é altamente recomendável capturar a tela do canvas e servi-la como uma imagem WEBP otimizada.
Is a Mesh Gradient different from a Conic Gradient?
Yes. Conic gradients sweep colors around a central pivot point (like a pie chart), whereas mesh gradients use multiple overlapping radial bursts to create irregular, organic blobs.