<h2 class="gradient-multiline"><span>Yes, this is possible to do with CSS!</span></h2>
body {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;
background-color: #fff;
}
.gradient-multiline {
position: relative;
width: 300px;
margin: 40px auto;
background-color: #fff;
text-align: center;
line-height: 1.5em;
overflow:hidden;
}
.gradient-multiline span {
color: #fff;
background-color: #000;
padding: 0.225rem 0.5rem;
/* Needs prefixing */
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
@supports(mix-blend-mode: lighten) {
.gradient-multiline::after {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
background: linear-gradient(60deg, #3629a2, #00ceff);
mix-blend-mode: lighten;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.