アニメーショングラデーション背景ジェネレーター — 11 種類の WebGL スタイルをライブプレビュー
WebGL でリアルタイムに描画される 11 種類のアニメーショングラデーション／抽象背景をプレビューできます。流体ブロブ、アンビエントライト、ステップグラデーション、ブラードット、グリッド、キューブ、波、トライアングルモザイクなど。スタイルと 6 種類の内蔵パレットをその場で切り替えられる、アップロード不要・サーバー不要のライブプレビューツールです。CSS を出力したり画像を書き出したりするツールではありません。
この背景ジェネレーターで実際にできること
11 種類のシェーダー駆動の背景スタイル
AbstractShape、AestheticFluid、AmbientLight、BigBlob、BlurDot、BlurGradient、GridArray、RandomCubes、StepGradient、TrianglesMosaic、WavyWaves。すべて 600 ピクセル高のキャンバス上で継続的にアニメーションします。
スタイルとパレットを即座に切り替え
操作は 2 つのドロップダウンだけ。背景スタイル用とパレット用です。どちらかを変更するとすぐにアニメーションが再構築され、生成ボタンもページの再読み込みもありません。
6 種類の内蔵パレット
Monochrome、Red、Green、Blue、Yellow、Purple。それぞれ 6 つの 16 進数カラーがハードコードされています。4 色スタイルは先頭 4 つの値だけを使い、6 色スタイルは 6 つすべてを使います。余分な色は切り捨てられます。
お使いの GPU 上でローカルに動作
すべてのフレームはブラウザ内の WebGL で描画されます。アップロードもサーバー呼び出しもなく、ネットワーク通信なしでアニメーションが動き続けます。
書き出しツールではなく、プレビュー用の遊び場
CSS の出力、PNG／SVG のダウンロード、ランダムボタン、ノイズやテクスチャの切り替え、プリセットの保存はありません。角度、色の位置、レイヤーの重ね合わせ、速度も公開されていません。
背景ジェネレーター FAQ
対応しているグラデーションの種類は？ リニア、ラジアル、コニック、メッシュ？
厳密に言えば CSS のどのグラデーション形式でもありません。このページは 11 種類の WebGL シェーダー背景を描画します。AbstractShape、AestheticFluid、AmbientLight、BigBlob、BlurDot、BlurGradient、GridArray、RandomCubes、StepGradient、TrianglesMosaic、WavyWaves です。いくつかはメッシュ風の流体グラデーションに見えますが、background-image のグラデーションではなくキャンバスのアニメーションです。
調整できる項目は？
2 つだけです。スタイルのドロップダウンとパレットのドロップダウン。角度、色の位置、レイヤー、カラーピッカー、速度、一時停止、ループの操作はありません。パレットは 6 つの固定スウォッチで、各スタイルはそのうち 4 つまたは 6 つの値を使います。
背景を画像として書き出せますか？
いいえ。ページ内に toDataURL、toBlob、ダウンロード処理はどこにもないため、キャンバスは表示のみで、PNG、JPEG、SVG として保存できません。
コピーできる CSS コードを生成しますか？
いいえ。CSS の出力もコピーボタンもありません。これらの背景は WebGL キャンバスであって background-image のグラデーションではないため、CSS のスニペットに落とし込むことはできません。CSS グラデーションが必要なら別のツールを使ってください。
プリセット、ランダム生成、ノイズ、設定の保存はありますか？
プリセットは 6 種類の内蔵パレットだけです。ランダムボタンはありません（シードは 1000 に固定）。ノイズやテクスチャのオプションもなく、ローカルストレージへの保存も行いません。ページを再読み込みすると AbstractShape と最初のパレットに戻ります。
スタイルやパレットを切り替えるとどうなりますか？
切り替えるたびに新しい背景インスタンスが生成され、同じコンテナに別のキャンバスが追加されます。古いインスタンスは破棄されないため、同じ id のキャンバスが複数重なり、表示されるのは最新の 1 枚です。何度も切り替えた場合はページを再読み込みしてください。
すべてローカルで完結しますか？
はい。レンダリングはすべてブラウザと GPU 上の WebGL で行われ、アップロードもサーバーへのリクエストもありません。ただし WebGL 非対応のブラウザでは代替の描画がありません。
