Cool Mask Effect With Gradients Using Pure CSS


Updated Feb 12th, 2022

Saw this on the Free Code Camp Typescript Quiz from friederberk.

Really Cool. Like something out of Adobe Illustrator in the browser.

font-family: "Fascinate Inline", Arial, Helvetica, sans-serif;
    background-image: linear-gradient(180deg, aqua, var(--primary));
    background-size: 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    filter: drop-shadow(2px 2px var(--secondary));
    //filter: drop-shadow(2px 2px #0085a3);
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    margin: 20px 0 0 0;
    line-height: 1;
    padding-bottom: 1rem;