Codepad Split Text Colour

HTML
<div class="content"> <h1 data-letters="Codepad">Codepad</h1> </div>
SCSS
::selection { background: cyan; } h1 { width: 100%; height: 100%; display: flex; align-items: center; text-align: center; position: absolute; margin: 0; font-family: 'Rubik Mono One', sans-serif; color: magenta; font-size: 50px; letter-spacing: -0.225rem; background: white; justify-content: center; z-index: 1; transition: font-size 250ms cubic-bezier(.59,.04,.3,1.43); @media screen and (min-width: 768px) { font-size: 80px; } @media screen and (min-width: 1024px) { font-size: 100px; } &:after { content: attr(data-letters); position: absolute; left: 0; z-index: 2; overflow: hidden; white-space: wrap; width: 100%; height: 100%; top: 0; display: flex; align-items: center; text-align: center; position: absolute; justify-content: center; color: blue; background: cyan; clip-path: polygon(0 0, 100% 0, 100% 25%, 0 77%); } }
JAVASCRIPT
Expand for more options Login