こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今日は、CSSの background-blend-mode を使って、まるで“フィルム写真”のようなレトロな質感を作る方法をご紹介します。
スマホカメラの写真でも、ちょっと懐かしい色味や光の滲みを足すだけで、SNSで映える独特の世界観を作れます。
特に飲食店・美容室・観光施設など、ブランドイメージを「世界観」で表現したい業種にとって、背景処理の演出はとても大きな武器になります。
CSSだけで完結し、画像を加工する必要がないのも魅力です。
この記事では、フィルムルックを作る3ステップと、コピペ可能なCSSサンプルをまとめて紹介していきます。
background-blend-modeとは？
CSSの background-blend-mode は、複数の背景画像・背景色を合成するためのプロパティです。
Photoshopの「スクリーン」「オーバーレイ」などの合成モードと同じ感覚で扱えます。
代表的なモードとしては、
- multiply（暗くする）
- screen（明るくする）
- overlay（コントラスト強調）
- soft-light（柔らかい光）
- difference（反転系）
などがあり、これらを背景同士に適用することで、写真に“フィルム独特の質感”を足すことが可能になります。
フィルム写真っぽく見せる3つのテクニック
- 色味をずらす（グラデーション × multiply）
- 光のかすれ・滲み（radial-gradient × screen）
- 粒状ノイズを重ねる（repeating-linear-gradient × overlay）
この3つのレイヤーを重ねることで、加工アプリなしでも 「味のあるフィルム質感」 を再現できます。
フィルム写真風「基本レシピ」CSS
以下は コピペですぐ試せるデモコード です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
各レイヤーがフィルム感を作る理由
応用：色味を変えて「昭和フィルム風」に
昭和のネガフィルムっぽくするには、
青み × 暖色のミックス が相性抜群です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
応用：映画のワンシーン風「シネマカラー」加工
映画っぽくするなら、青緑 × オレンジ の色補正が最強です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
まとめ
background-blend-mode をうまく組み合わせれば、Photoshopなしでも「フィルム写真風」の雰囲気を再現できます。
- 色味の偏り
- 光の滲み
- 粒ノイズ
これらを CSS だけで作れるのは本当に便利です。
世界観のある背景演出を作りたい方は、ぜひ試してみてください！
satokotadesignキャンペーン実施中！
