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