I recently took inspiration from a Codepen demo found here: https://codepen.io/CSWApps/pen/MmpBjV and tried to implement the styling into my own code. Here's what I did:
<style>
body {
background-color: #5c4084;
text-align: center;
padding: 50px;
}
.container {
padding: 40px 80px;
background-color: #fff;
border-radius: 8px;
}
.heading {
h1 {
background: -webkit-linear-gradient(#fff, #999);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
text-align: center;
margin: 0 0 5px 0;
font-weight: 900;
font-size: 4rem;
color: #fff;
}
h4 {
color: lighten(#5c3d86,30%);
text-align: center;
margin: 0 0 35px 0;
font-weight: 400;
font-size: 24px;
}
}
</style>
However, when starting with the H1 element, my IDE gives me an error message saying "semicolon expected" on the line
background: -webkit-linear-gradient(#fff, #999);
. It seems that the linear gradient isn't showing up as intended.