Two Gradients With Two Distinct Sections With Just One Div Element

I was wondering if it is possible to create a background effect like in the image below using just one div. I know how to achieve it with two divs, but my situation would make it r

Solution 1:

Yes, this is possible using a single div with a :pseudo-element.

What you could do is add the second linear-gradient to its :after :pseudo-element. Notice the use of rgba(r, b, g, a) instead of hex colors. This way you could control the opacity of the second linear-gradient by changing its alpha value.

body, html {
  height: 100%;
  margin: 0;
}
div {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(110deg, #5EDC2945%, #FF005845%, #FF0058100%);
  z-index: -1;
}
div:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-180deg, transparent 0%, rgba(0,0,0,0.6) 100%);
}

<div></div>

---

If you want the exact same gradient colors that you've posted in your question, you'll need clipPath.

body {
  background: #222222;
  margin: 0;
}
.bg {
  width: 500px;
  height: 300px;
  background: linear-gradient(-180deg, #F5515F0%, #8E0A1E100%);
}
.bg-2 {
  position: absolute;
  width: 500px;
  height: 300px;
  top: 0;
  z-index: -1;
  background-image: linear-gradient(-180deg, #95D4280%, #20560B100%);
}

<svgwidth="500"height="300"><defs><clipPathid="shape"><pathd="M300,0 L501,0 L501,301 L175,301z" /></clipPath></defs><foreignObjectclip-path="url(#shape)"width="500"height="300"><divclass="bg"></div></foreignObject></svg><divclass="bg-2"></div>

Solution 2:

You can get this effect, but you will need to set overflow hidden on the div and to set the background in a after pseudo class

.test {
    width: 400px;
    height: 300px;
    border: solid 1px black;
    position: relative;
    overflow: hidden;
}

.test:after {
    content: "";
    position: absolute;
    width: 160%;
    height: 160%;
    top: -30%;
    left: -30%;
    background-image: linear-gradient(-210deg, #95D4280%, #20560B100%), linear-gradient(-210deg, #F5515F0%, #8E0A1E100%);
    background-position: top left, top right;
    background-size: 50%100%;
    background-repeat: no-repeat;
    -webkit-transform: rotate(30deg);
}

<divclass="test"></div>

The after is rotated to get the inclined separation. The dimensions need to be bigger so as not to show missing corners.

And then, you assign the 2 linear gradients as 2 separate background-images,inclined an additional 30deg to compensate for the base inclination