Gerador de Fundo CSS Aurora / Blob de Gradiente

Um gradiente de aurora é um estilo de fundo que imita as faixas suaves e desfocadas da aurora boreal. Normalmente é construído por camadas de vários grandes pontos coloridos amplamente desfocados sobre uma base escura, de forma que as cores se misturem suavemente, em vez de se encontrar em linhas rígidas. Esse estilo tornou-se popular em páginas de landing de SaaS porque adiciona profundidade e atmosfera agradável ao movimento, sem o peso visual de uma fotografia.

Um gradiente radial desenha um ponto circular de cor que desfoca até um ponto escolhido, então camadas de vários desses gradientes produzem discos coloridos com bordas definidas. Aplicar filter:blur ao camada desfoca esses discos ao promover cada pixel com seus vizinhos, transformando os círculos rígidos em blocos brilhantes e esfumados. Aumentar o raio do desfoque amplia essa média, tornando os blocos maiores e mais difusos, mesmo que os gradientes subjacentes não tenham mudado.

Ambos aplicam um desfoque de tipo Gaussiano, mas estão em pipelines de renderização diferentes. O CSS filter:blur é rápido e acelerado por hardware na maioria dos navegadores, mas pode cortar nas bordas do elemento e pode interagir de forma inadequada com transformações, contextos de pilha ou filtros de fundo. O SVG feGaussianBlur faz parte do gráfico de filtros do SVG, então compõe de forma previsível dentro da caixa de visualização do SVG e é fácil de incorporar como um único ativo autônomo, o que é útil quando você deseja que o fundo acompanhe o markup ou seja exportado como uma imagem.

Filtros pesados de desfoque forçam o navegador a recalcular grandes áreas em cada quadro, e um raio grande de desfoque aumenta o tamanho do kernel que o GPU precisa convolver. Em dispositivos de baixa potência, animar um elemento fortemente desfocado ou empilhar muitas camadas desfocadas sobre conteúdo em rolagem pode reduzir a taxa de quadros e consumir a bateria. As soluções comuns são manter as camadas desfocadas estáticas, pré-renderizá-las em uma imagem quando possível ou movê-las para uma camada composta separada, para que o restante da página não precise desfocar em cada rolagem.