<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.
</span>
</div>
</div>
.-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
This Pen doesn't use any external JavaScript resources.