アーラー / グラデーションブロブ CSS バックグラウンドジェネレーター

An aurora gradient is a background style that imitates the soft, blurred light bands of the aurora borealis. It is typically built by layering several large, heavily blurred radial color spots over a dark base, so the colors bleed into each other gently rather than meeting at sharp lines. This look became popular on modern SaaS landing pages because it adds depth and motion-friendly atmosphere without the visual weight of a photograph.

A radial-gradient draws a circular color spot that fades to a chosen endpoint, so layering several of them produces sharp-edged colored discs. Applying filter:blur to the layer softens those discs by averaging each pixel with its neighbors, which turns the hard circles into wispy, glowing blobs. Increasing the blur radius spreads the averaging further, which makes the blobs look larger and more diffuse even though the underlying gradients have not changed.

Both apply a Gaussian-style blur, but they live in different rendering pipelines. CSS filter:blur is fast and hardware-accelerated in most browsers, but it can clip at the edges of the element and may interact awkwardly with transforms, stacking contexts, or backdrop filters. SVG feGaussianBlur is part of the SVG filter graph, so it composites predictably inside the SVG viewBox and is easy to embed as a single self-contained asset, which is useful when you want the background to travel with markup or be exported as an image.

Heavy blur filters force the browser to repaint large areas every frame they change, and a large blur radius increases the kernel size the GPU has to convolve. On low-end devices, animating a strongly blurred element or stacking many blurred layers on top of scrolling content can drop the frame rate and drain the battery. The common mitigations are to keep blurred layers static, pre-render them to an image when possible, or move them to their own composited layer so the rest of the page does not re-blur on every scroll.