cssで書いたグリッド線背景の上部だけ透過グラデーションをかけたい

Question

画像を使わずにcssで書いたグリッド線背景の上部だけグラデーションをかけたいです。

再現したいもの(上の灰色はグラデーションをわかりやすくするもの)↓

上の画像のようなグリッド線を背景にWebページを作りたいです。

グリッド線を書くことには成功したのですが、上部のみ白に向かって透過していくようなグラデーションの再現ができません。

    <div class="grad">
      <div class="grid">
      </div>
    </div>

.grad {
  width: 300px;
  height: 100px;

グラデーション
わかりやすいように色付け
  background-image: linear-gradient(
    to top,
    rgba(255, 0, 255, 0),
    rgba(255, 0, 255, 1)
  );

  position: relative;
  z-index: 2;
}

.grid {
  width: 300px;
  height: 300px;

  background-image: linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(to right, currentColor 1px, transparent 1px);
  background-size: 40px 40px;
  background-color: rgba(255, 255, 255, 0);
  background-blend-mode: lighten;

  position: absolute;
  z-index: 1;
}

グリッド線の上にもう一つDivを重ね上部のみ透明から白のグラデーションの要素を上におけできると思ったのですが、なぜかgridクラスのほうが上に来ました。
なのでz-indexをためしましたがなぜか効かなかったです。

gradクラスをgridクラスの上に持ってくる方法か、他の書き方で画像のグラデーションを再現できる方法があれば教えて下さい。

Answer 1

z-indexといえども、子を親の背面に移動させることはできません。

単純に親にグリッド線、子に透過グラデーションを設定すればいいでしょう。

<div class="grid">
  <div class="grad">
  </div>
</div>

.grad {
  width: 300px;
  height: 100px;
  background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1)
  );
}
.grid {
  width: 300px;
  height: 300px;
  background-image: linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(to right, currentColor 1px, transparent 1px);
  background-size: 40px 40px;
  background-color: rgba(255, 255, 255, 0);
  background-blend-mode: lighten;
}