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

:root {
  --bluecolor: rgb(0 0 255 / 100%);
  --orangecolor: rgb(255 165 0 / 100%);
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  height: 100%;
  overflow: hidden;
}

section {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px;

  background-image: linear-gradient(blue, rgb(0 0 0 / 0)),
    linear-gradient(rgb(0 0 0 / 0), orange 50%);
  background-size: 100vw 100vh, 100vw 100vh;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
}

div {
  width: calc(100vw - 80px);
  height: calc((100vh - 160px) / 3);
  background-image: linear-gradient(var(--bluecolor), rgb(0 0 0 / 0)),
    linear-gradient(rgb(0 0 0 / 0), var(--orangecolor)),
    url("https://images.unsplash.com/photo-1565619624098-cf4168a7cd9d?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTE0NzYzMQ&ixlib=rb-1.2.1&q=85");
  background-size: 100% 100vh, 100% 100vh, cover;
  background-repeat: no-repeat;
}

div:nth-child(1) {
  --bluecolor: rgb(0 0 255 / 20%);
  --orangecolor: rgb(255 165 0 / 20%);
  background-position: 0 -40px, 0 -40px, 0 0;
}

div:nth-child(2) {
  --bluecolor: rgb(0 0 255 / 50%);
  --orangecolor: rgb(255 165 0 / 50%);
  background-position: 0 50%, 0 50%, 0 0;
}

div:nth-child(3) {
  --bluecolor: rgb(0 0 255 / 80%);
  --orangecolor: rgb(255 165 0 / 80%);
  background-position: 0 calc(100% + 40px), 0 calc(100% + 40px), 0 0;
}

/*
 * https://css-tricks.com/maybe-there-kinda-is-background-opacity/#comment-1787094
 */