Photoshopのグラデーションオーバーレイを、background-imageプロパティのlinear-gradientで適用します。グラデーションの角度はいくつかのパターンを試します。
デモページはこちら

htmlは以下の構造です。

<p>Photoshopのグラデーションオーバーレイの角度90°<br>
CSSのlinear-gradientの角度0°</p>
<div class="div-01"></div>
<p>Photoshopのグラデーションオーバーレイの角度0°<br>
CSSのlinear-gradientの角度90°</p>
<div class="div-02"></div>
<p>Photoshopのグラデーションオーバーレイの角度-90°<br>
CSSのlinear-gradientの角度180°、または初期値なので指定なしでもOK</p>
<div class="div-03"></div>
<p>Photoshopのグラデーションオーバーレイの角度-45°<br>
CSSのlinear-gradientの角度135°</p>
<div class="div-04"></div>

Photoshopのグラデーションオーバーレイの角度は、初期値が90°です。0°は右方向で反時計回りに増えていきます。なので、90°は上方向です。下から上に開始色から終了色のグラデーションがかかります。

linear-gradienの角度は、初期値が「to bottom（180deg）」です。0°は上方向で時計回りに増えていきます。なので、下から上のグラデーションは「to top（0deg）」を指定します。

.div-01 {
  width: 200px;
  min-height: 200px;
  margin: 0 auto 1em;
  background-image: linear-gradient(0deg, #0000ff, #fff);
}

次に、Photoshopのグラデーションオーバーレイの角度が0°の場合です。右方向、左から右のグラデーションです。

linear-gradienは90degを指定します。

.div-02 {
  width: 200px;
  min-height: 200px;
  margin: 0 auto 1em;
  background-image: linear-gradient(90deg, #0000ff, #fff);
}

次に、Photoshopのグラデーションオーバーレイの角度が-90°の場合です。下方向、上から下のグラデーションです。

linear-gradienは180degを指定します。初期値が180degなので、指定を省略しても問題ありません。

.div-03 {
  width: 200px;
  min-height: 200px;
  margin: 0 auto 1em;
  background-image: linear-gradient(#0000ff, #fff);
}

最後に、Photoshopのグラデーションオーバーレイの角度が-45°の場合です。右下方向、左上から右下のグラデーションです。

linear-gradienは135degを指定します。

.div-04 {
  width: 200px;
  min-height: 200px;
  margin: 0 auto 1em;
  background-image: linear-gradient(135deg, #0000ff, #fff);
}

なお、グラデーションの「逆方向」にチェックを入れた場合、終了色から開始色のグラデーションになります。

CSSは、角度はPhotoshopの指定そのままで、終了色から開始色のグラデーションを指定すれば対応できます。

.div-05 {
  width: 200px;
  min-height: 200px;
  margin: 0 auto 1em;
  background-image: linear-gradient(135deg, #fff, #0000ff);
}