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);
}
}
