Grid effect as in background-clip: text-CodePudding

How to make such a gradient effect? The entire page has a gradient underneath, the container is black, and individual grids have a fragment of the gradient underneath as the background. The effect should be like background-clip: text; only block element instead of text.

CodePudding user response：

A combination of pseudo element and clip-path can do this:

.grid {
  display:grid;
  gap:20px;
  grid-template-columns:1fr 1fr;
  position:relative; /* relative here */
  z-index:0;
}
.grid div {
  aspect-ratio:1;
  clip-path:inset(0); /* clip the pseudo element to the child dimension*/
}
.grid div:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(45deg,red,blue); /* your gradient */
}

body {
 background:#000
}

<div >
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>