<div class="wrap">
  <span class="text clone">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Etiam neque. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede.
  </span>
  <br />
  <span class="text slice">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Etiam neque. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede.
  </span>
</div>
body
{
  background: #1D1E22;
  color: #fff;
}
.clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.slice {
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}
.text {
  font-size: 16px;
  line-height: 2em;
  background-image: linear-gradient(-144deg, #6AEEC6 0%, #698D28 100%);
  border-radius: 4px;
  padding: 4px 18px;
  box-sizing: border-box;
}
.wrap {
  max-width: 320px;
  margin: 1em auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.