CSS Gradient Background Generator

https://www.css-gradient.com/

https://www.joshwcomeau.com/gradient-generator/

https://www.learnui.design/tools/gradient-generator.html

https://angrytools.com/gradient/

 

一言而可以兴邦

.mc-gradient-text {
background-image: linear-gradient(270deg, #8300E9 0%, #00edf9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Gradient Text Animation

其中keyframes 可以替换为motion.page的动画trigger，比如scr0ll等。
@keyframes mc-animated-gradient-flow {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.mc-gradient-text-flow {
background: linear-gradient(-45deg,#2193b0,#6dd5ed,#42275a,#734b6d);
background-size: 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: mc-animated-gradient-flow 5s ease-in-out infinite;
-webkit-animation: mc-animated-gradient-flow 5s ease-in-out infinite;
}

Mask Text

.mc-mask-text{
background-clip: text !important;
-webkit-background-clip: text !important;
color: transparent !important;
}

Mask Text

.mc-mask-text-animation{
background-clip: text !important;
-webkit-background-clip: text !important;
color: transparent !important;
animation: mc-animated-gradient-flow 5s ease-in-out infinite;
-webkit-animation: mc-animated-gradient-flow 5s ease-in-out infinite;
}