Knowledge Library
Print

Rainbow Font CSS

/* rainbow text blue to green to yellow */
.rainbow-txt-bl-grn-yl {
background-color: #f3ec78;
background-image: linear-gradient(90deg, #01aafa, #fed548);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}

/* rainbow text purple to green to orange */
.rainbow-txt-pp-grn-orng {
background: #CD237C;
background: -webkit-linear-gradient(to right, #CD237C 0%, #7E1083 28%, #44D1BB 60%, #FEAB43 100%);
background: -moz-linear-gradient(to right, #CD237C 0%, #7E1083 28%, #44D1BB 60%, #FEAB43 100%);
background: linear-gradient(to right, #CD237C 0%, #7E1083 28%, #44D1BB 60%, #FEAB43 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* rainbow text purple to green to orange v2 */
.rainbow-txt-pp-grn-orngv2 {
background: #7E1083;
background: -webkit-linear-gradient(to right, #7E1083 0%, #A21477 19%, #44D1BB 65%, #FEAB43 100%);
background: -moz-linear-gradient(to right, #7E1083 0%, #A21477 19%, #44D1BB 65%, #FEAB43 100%);
background: linear-gradient(to right, #7E1083 0%, #A21477 19%, #44D1BB 65%, #FEAB43 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Table of Contents

Looking for a systematic way to grow your business without overwhelm, frustration or trying to google every answer?

Get Weekly Money Making Advice Sent To Your Inbox

Weekly Advice To Your Inbox

We will not spam share your information ever!