CSSでPhotoshopのパターンオーバーレイを完全再現！3つの方法を解説

Photoshopの「パターンオーバーレイ」をCSSで再現することは可能です！以下の方法を使えば、同じような効果を実装できます。

方法①: background-image でパターンを適用

最も簡単な方法は、パターン画像を background-image で重ねることです。

.element {
  position: relative;
  background: url('pattern.png') repeat;
}

もしベースカラーの上にパターンを乗せたい場合は、複数の背景を指定できます。

.element {
  background: 
    url('pattern.png') repeat, /* パターン */
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)); /* ベース色 */
}

方法②: CSS mask-image（Webkit系のみ）

Photoshopの「オーバーレイ」効果に近づけるには、CSSの mask-image を使ってテクスチャを合成する方法もあります。

.element {
  background: #ffcc00; /* ベースの色 */
  -webkit-mask-image: url('pattern.png');
  mask-image: url('pattern.png');
}

⚠注意: mask-image はWebkit系（Chrome/Safari）での対応が中心なので、Firefoxなどでは -webkit-mask-composite などの調整が必要になります。

方法③: CSS mix-blend-mode を活用

Photoshopの「オーバーレイ」ブレンドモードを再現するには、CSSの mix-blend-mode を使います。

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background: #ffcc00; /* ベースカラー */
}

.pattern-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('pattern.png') repeat;
  mix-blend-mode: overlay; /* ここがポイント */
}

mix-blend-mode: overlay; を使うと、Photoshopのオーバーレイ効果に近い結果が得られます。

どれを使う？

おすすめ： background-image + mix-blend-mode の組み合わせ！
この方法なら、シンプルにCSSだけでパターンオーバーレイの効果を再現できます✨