<div class="parent">
<div class="red">
  red red red
</div>
</div>
<div class="parent2">
<div class="red2">
  red red red
</div>
</div>

.red {
  width: 100px;
  height: 100px;
  background: red;
  z-index: -1;
  position: relative;
}

.parent {
  width: 300px;
  height: 300px;
  margin-bottom: 30px;
  background: linear-gradient(
    90deg,
    rgba(7, 58, 187, 0.5) 0%,
    rgba(0, 255, 235, 0.05) 100%
  );
}

.red2 {
  width: 100px;
  height: 100px;
  background: red;
}

.parent2 {
  width: 300px;
  height: 300px;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      rgba(7, 58, 187, 0.5) 0%,
      rgba(0, 255, 235, 0.05) 100%
    );
  }
}