Simple Is Better

HTML
<p class="gradient">Simple</p> <p class="gradient">is better</p> <p class="gradient">than complex.</p>
SCSS
body { padding: 5rem 0; background: linear-gradient(45deg, #f857a6, #e65245); background-attachment: fixed; overflow: hidden; } p { position: relative; z-index: 5; text-align: center; font: caption; font-size: 10vw; font-weight: 900; text-shadow: 5px 5px 0px rgba(0,0,0,0.1); margin: 0; margin: 0 auto; } // Example usage @mixin gradientText($color1, $color2, $dir) { background: linear-gradient($color1, $color2, $dir); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .gradient { &:nth-child(1) { @include gradientText(90deg, #1CD8D2, #93EDC7); } &:nth-child(2) { @include gradientText(90deg, #ECE9E6, #FFFFFF); } &:nth-child(3) { @include gradientText(180deg, #C9FFBF, #FFAFBD); } &:nth-child(4) { @include gradientText(90deg, #B993D6, #8CA6DB); } }
JAVASCRIPT
Expand for more options Login