Generated by SassMeister.com.

SassMeister-input-HTML.jade

.container
  .box
  
  img.box(src="https://gemio-dev.s3.amazonaws.com/jems/jem/image/354/test_gem.png")

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

//linear-gradient(#87D0DF, #87D0DF) 100% 100% / 50% 100% no-repeat,
//linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 0% 0% / 50% 100%

.container {
  text-align: center;
}
$blue: rgba(135, 208, 223, 1);
$blue: linear-gradient($blue, $blue);

$red: rgba(242, 102, 68, 1);
$red: linear-gradient($red, $red);

.box {
  margin: 0 auto 1em;
  width: 4em;
  height: 8em;
  border: 1px solid #bbb;

  background: $blue 0% 0% / 100% 50% no-repeat, $red 0% 50% / 100% 50%;
  // background: linear-gradient(rgb(135, 208, 223), rgb(135, 208, 223)) 100% 100% / 100% 50% no-repeat, linear-gradient(rgb(242, 102, 68), rgb(242, 102, 68)) 0% 0% / 100% 50%;
  // background: linear-gradient(rgb(135, 208, 223), rgb(135, 208, 223)) 0% 0% / 100% 50% no-repeat, linear-gradient(rgb(242, 102, 68), rgb(242, 102, 68)) 0% 50% / 100% 50%;
  // background: linear-gradient(rgb(135, 208, 223), rgb(135, 208, 223)) 0% 0% / 100% 50% no-repeat, linear-gradient(rgb(242, 102, 68), rgb(242, 102, 68)) 0% 50% / 100% 50%;
  
}
img.box {
  width: auto;
  height: auto;
  border: 0;
}

SassMeister-output.css

.container {
  text-align: center;
}

.box {
  margin: 0 auto 1em;
  width: 4em;
  height: 8em;
  border: 1px solid #bbb;
  background: linear-gradient(#87d0df, #87d0df) 0% 0%/100% 50% no-repeat, linear-gradient(#f26644, #f26644) 0% 50%/100% 50%;
}

img.box {
  width: auto;
  height: auto;
  border: 0;
}

SassMeister-rendered.html

<div class="container">
  <div class="box"></div><img src="https://gemio-dev.s3.amazonaws.com/jems/jem/image/354/test_gem.png" class="box"/>
</div>