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

アーラグラデーションは、アーラボレアスのソフトでぼやけた光帯を模倣した背景スタイルです。通常、いくつかの大きな、強くぼやけた径方向の色のスポットを暗いベース上に重ねることで構築され、色が緩やかに混ざり合い、鋭い線で接することなく、自然に繋がります。このスタイルは、現代のSaaSのリターゲットページに人気があり、写真のような視覚的な重みを避けながら、深みと動きに優しい雰囲気を提供します。

径方向グラデーションは、指定された終点にフェードする円形の色のスポットを描きます。複数のそれらを重ねることで、鋭いエッジを持つ色のディスクが得られます。filter:blurを適用することで、各ピクセルがその周囲のピクセルと平均化され、硬い円がふわっと輝くブロブに変わります。ブラー半径を増加させることで、平均化の範囲が広がり、ブロブが大きくなり、広がりが増し、もとのグラデーションが変化していないにもかかわらず、ブロブが大きくなり、広がりが増します。

どちらもガウシアンスタイルのブラーを適用しますが、異なるレンダリングパイプラインに存在します。CSS filter:blurは、ほとんどのブラウザで高速かつハードウェアアクセラレートですが、エッジに切り詰められ、変換、スタックコンテキスト、バックグラウンドフィルターとの相互作用が不適切になる可能性があります。SVG feGaussianBlurはSVGフィルタグラフの一部であり、SVGのビュー領域内で予測可能に合成され、マーカーとともに埋め込まれた単一のアセットとして簡単に埋め込み可能であり、背景がマーカーとともに移動するか、または画像としてエクスポートする必要がある場合に特に有用です。

重いブラーフィルタは、変化するたびに大きな領域をリペインティングを強制し、大きなブラー半径はGPUが処理するカーネルサイズを増加させます。低性能デバイスでは、強くブレッドされた要素をアニメーションするか、スクロール中のコンテンツに多くのブレッドレイヤーを重ねることで、フレームレートが低下し、バッテリー消費が増加します。一般的な対策は、ブレッドレイヤーを静的とし、可能な限り画像に事前にレンダリングすること、またはそれらを独自の合成レイヤーに移動し、ページの他の部分がスクロール時に再ブレッドされないようにすることです。