ノイズグレイン背景（フィルム風）
古いフィルム写真のようなザラついた質感を背景に重ねる装飾です。 .ng__noise という重ね層に、極小の radial-gradient を 2 種（白い粒と黒い粒）並べて点描の粒子を作り、 mix-blend-mode:multiply で下のグラデーションになじませています。
解説
古いフィルム写真のようなザラついた質感を背景に重ねる装飾です。.ng__noise という重ね層に、極小の radial-gradient を 2 種（白い粒と黒い粒）並べて点描の粒子を作り、mix-blend-mode:multiply で下のグラデーションになじませています。粒は @keyframes ngShift で steps(4) のカクカクした動きにより細かく揺れ、本物のフィルムノイズのようなちらつきを再現。画像を使わず CSS だけで完結します。
使う場面
- ヴィンテージやレトロを打ち出すカフェ・雑貨サイト
- 写真家やフォトギャラリーのキービジュアル
- アナログ感を出したいミュージック・映像系の LP
ザラつきの強さは .ng__noise の opacity:.4 で調整し、粒の細かさは background-size の 3px 5px を変えると効果が変わります。下地は linear-gradient(135deg,#fbb034,#f5576c) を差し替えて好みの色味に。steps のちらつきは敏感な人には負担になりやすいので、揺れを止めて質感だけ残す静止版を prefers-reduced-motion 用に用意すると配慮が行き届きます。
使用例・適したシーン
- ヒーロー背景
- セクション区切り
- フッター前装飾
よくある質問
ノイズの濃さはどう調整しますか?
.ng__noise の opacity を上げると粒が濃く強くなり、下げると控えめになります。粒の大きさは background-size の数値で変えられます。
文字が読みにくくならないか心配です。
ノイズ層は背景に重なるだけで、見出しは z-index:2 で前面に置かれているため可読性は保たれます。気になる場合は opacity を下げるか、文字の周りだけノイズを薄くしてください。