粒の乗ったグラデーションを、
その場で作って持ち帰る。

グラデーションの正体は、色のついた図形を大きくぼかして重ねたものでしかない。Soft と Dark は色ごとに多角形を切り出して filter: blur() でつぶし、Bold は CSS のグラデーションをそのまま使っている。多角形の頂点をランダムに揺らすと、円を並べたときの「作り物っぽさ」が消える。

粒は SVG の feTurbulence でノイズを作り、彩度を落として上から mix-blend-mode で乗せている。これがあるかないかで、グラデーションの帯（バンディング）の見え方がかなり変わる。

画像の書き出しは、画面のスクリーンショットではない。同じパラメータで Canvas に描き直している。ぼかしは要素のローカル座標で効いてから拡大・回転がかかる、背景画像は先頭が手前に来る——といった CSS の順序をそのまま写しているので、プレビューと出力がずれない。指定したサイズでそのまま描くので、4K で書き出しても輪郭が甘くならない。

• 粒の扱い：「プレビュー通り」は粒も出力倍率ぶん大きくする。壁紙のように等倍で見るなら「等倍」のほうがフィルムグレインらしく出る。
• CSSをコピー：画像ではなくコードで欲しいときに。そのまま貼れる <div> が返る。
• 送信なし：色の計算も描画も書き出しも、全部ブラウザの中。作ったものはどこにも上がらない。