<div class="container">
  <div class="wrap">
    <span class="text -clone">
       box-decoration-break property specifies how the element's background, padding, border, box-shadow, margin and clip are applied when it's wrapped into multiple lines.
.-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

// try applying this class
.-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;
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css
  2. https://codepen.io/gregh/pen/jyNrJW.css

External JavaScript

This Pen doesn't use any external JavaScript resources.