Gradient Text
The gradient in the text can be obtained by using the background-image property with a linear-gradient, and setting the background-clip property to text. In order for the gradient to show through, the color property should be set to transparent.
majadc.com
SCSS code
.text-gradient {
color: $color-5;
@supports ( background-clip: text ) or ( -webkit-background-clip: text ) {
background-image: linear-gradient(to right, $color-5 10%, $color-10 30%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
}CSS code
.text-gradient {
color: #c52033;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
.text-gradient {
background-image: linear-gradient(to right, #209cc5 10%, #4f854c 30%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
}