Choose Love

Feel free to adjust the gradient as you see fit, here we chose all the colors of the PRIDE flag and gave it a good 95 degree rotation to catch all the colors as we animate down the line. Now let’s take a look at the code behind it:

// CSS
.rainbow { 
    position: absolute;
    background: linear-gradient(95deg, #000000, #784f17, #fe0000, #fd8c00, #ffe500, #119f0b, #0644b3, #c22edc, #feafc7, #75d6ec);
    background-size: 1800% 1800%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: 'Lobster', cursive;
    color: transparent;
    text-align: center;
    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -o-background-clip: text;
    background-clip: text;
}
 
@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

// HTML
<div class='rainbow'>Choose Love</div>