A study of rainbows

With it being Pride Month and all, I’ve been playing around a little bit with CSS to create a rainbow hover state for my site logo.

Here’s a static version of the active state, for those on mobile:

And here is the dynamic version in all it’s glory:

I quite like the effect 🙂

Oh, and here is a rainbow flag that was left over from the process:

Finally, here’s the CSS for that flag, in case anyone wants to use it:

.pride-flag {
    display: inline-block;
    width: 1.667em;
    height: 1em;
    background: linear-gradient(
        to bottom,
        #e0392c 0% 16.67%,
        #e2922f 16.67% 33.33%,
        #e8c93d 33.33% 50%,
        #3e8a30 50% 66.67%,
        #2c4fe0 66.67% 83.33%,
        #7e2289 83.33% 100%
    );
}

Happy Pride!