.text
  span Lorem ipsum dolor sit amet, consectetur adipiscing elit
View Compiled
body
  padding: 2em
.text
  position: relative
  font-size: 4em
  font-family: sans-serif
  line-height: 150%
  overflow: hidden
  background: white
  span
    color: white
    background: #fea400
    padding: 0.2em
    -webkit-box-decoration-break: clone
    box-decoration-break: clone
    
  

@supports(mix-blend-mode: lighten)
  .text::after
    position: absolute
    content: ''
    top: 0
    right: 0
    bottom: 0
    left: 0
    pointer-events: none
    background: linear-gradient(180deg, #b6b6b6 0%, #686868 100%)
    mix-blend-mode: overlay
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.