フィルムノイズ背景
細かいざらつきを乗せた、フィルム調・アナログ感のある暗色背景です。ノイズは画像ではなく、 ::after 疑似要素に埋め込んだSVGの feTurbulence フィルタで生成しています。これにランダムな粒状ノイズを描かせ、 mix-blend-mode:overlay で背景に馴染ませることで、レトロな質感を表現…
解説
細かいざらつきを乗せた、フィルム調・アナログ感のある暗色背景です。ノイズは画像ではなく、::after疑似要素に埋め込んだSVGのfeTurbulenceフィルタで生成しています。これにランダムな粒状ノイズを描かせ、mix-blend-mode:overlayで背景に馴染ませることで、レトロな質感を表現しています。
使いどころ
こだわりのあるブランドサイト、写真集や作品集のトップ、音楽・カルチャー系のヒーローなど、温かみや味わいを出したい場面に向きます。暗い背景に明るい文字を合わせると雰囲気が際立ちます。
- 粒の細かさは
baseFrequencyの値で調整（大きいほど細かい） - ノイズの濃さは
::afterのopacityで増減 - ベースの背景色や文字色を変えて世界観を作る
ノイズは全面を覆うため、濃くしすぎると本文が読みにくくなります。pointer-events:noneでクリックを妨げない配慮も入っているので、ボタンやリンクの操作には影響しません。
使用例・適したシーン
- ヒーロー背景
- セクション区切り
- フッター前装飾
よくある質問
ノイズの量や粒の細かさは調整できますか
粒の細かさはSVGフィルタの baseFrequency の値で、ノイズの濃さは ::after の opacity で調整します。文字を乗せる場合は opacity を下げ、可読性を確保すると読みやすくなります。
ノイズ画像のファイルは必要ですか
不要です。SVGの feTurbulence フィルタでノイズをその場で生成しているため、外部の画像ファイルを読み込みません。配置がシンプルで、ファイル管理の手間もかかりません。