Aurora / Gradient Blob CSS Hintergrundgenerator

Ein Aurora-Gradient ist eine Hintergrundstil, der die weichen, verschwommenen Lichtbänder der Aurora borealis nachahmt. Er wird normalerweise durch Schichten mehrerer großer, stark verschwommener radiale Farbflächen über einen dunklen Hintergrund gebildet, wobei die Farben sanft ineinander übergehen, anstatt an scharfen Linien zu treffen. Dieser Look wurde auf modernen SaaS-Landing-Pages populär, weil er Tiefe und eine bewegungsfreundliche Atmosphäre hinzufügt, ohne die visuelle Belastung eines Fotos zu erzeugen.

Ein radial-gradient zeichnet einen kreisförmigen Farbabschnitt, der an einen gewählten Endpunkt abnimmt, sodass die Schichtung mehrerer solcher Abschnitte scharfe, farbige Kreise erzeugt. Die Anwendung von filter:blur auf die Schicht weicht diese Kreise durch Durchschnittsrechnung jedes Pixels mit seinen Nachbarn ab, wodurch die scharfen Kreise zu dünnen, leuchtenden Blöcken werden. Je größer der Blur-Radius, desto weiter wird die Durchschnittsrechnung ausgeführt, wodurch die Blöcke größer und diffuser erscheinen, obwohl die zugrunde liegenden Gradienten nicht verändert wurden.

Beide erzeugen einen Gauß-ähnlichen Blurs, aber sie befinden sich in unterschiedlichen Rendern. CSS filter:blur ist in den meisten Browsern schnell und hardwarebeschleunigt, kann jedoch an den Rändern des Elements abschneiden und kann unerwünschte Wechselwirkungen mit Transforms, Stacking Contexts oder Backdrop Filters aufweisen. SVG feGaussianBlur ist Teil des SVG-Filtergraphen und komponiert sich vorhersehbar innerhalb des SVG-ViewBox, was es leicht ermöglicht, als einzelnen, selbstständigen Asset einzufügen, was nützlich ist, wenn der Hintergrund mit Markup verbunden oder als Bild exportiert werden soll.

Schwere Blur-Filter erzwingen das Neuprogrammieren großer Bereiche jedes Frame, wenn sie sich ändern, und ein großer Blur-Radius erhöht die Größe des Kernels, den die GPU konvolutionieren muss. Auf niedrigen Geräten kann die Animation eines stark verschwommenen Elements oder die Stapelung vieler verschwommener Schichten über scrollendes Content die Frame-Rate senken und die Batterie leeren. Die gängigen Abmilderungen sind, verschwommene Schichten statisch zu halten, sie bei Bedarf vorzurendern oder sie in eine eigene komponierte Schicht zu verschieben, sodass der Rest der Seite nicht jedes Mal beim Scrollen neu verschwommen wird.