Purely CSS full hue wheel rainbow border, compatible with Firefox - css

Question

I am trying to achieve an effect in which the border of an element would go through every color of the rainbow. I was able to find a solution which works very well on Chrome and on Edge, but doesn't work on Firefox due to the lack of support of the conic-gradient property.
Here is the working example I described:
.rainbow-border {
border: double 7px transparent;
background-image: linear-gradient(LightSteelBlue, LightSteelBlue), conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
background-origin: border-box;
background-clip: content-box, border-box;
}
body {
background-color: LightSlateGrey;
}
#keyframes border-radius-anim {
0% { border-radius: 0px; }
100% { border-radius: 90px; }
}
.main {
width: 80px;
height: 80px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.3);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: border-radius-anim 5s infinite alternate both;
}
<div class="main rainbow-border"></div>
I am working on a project in which different elements have this border, they can have different border width and I should animate it on hover. This solution works perfectly fine for my problem, however not in Firefox and support is required for this browser.
One easy working solution is to replace the conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) by some url(url_to_conic_gradient_image), however I am wondering if a purely CSS solution exists, and if so what it looks like.

Answer 1

Using a JS library as a polyfill
As yunzen pointed out, it exists a polyfill for conic-gradient, it works really well from my tests, and it was able to cover this edge case.
Famous Lea Verou made a polyfill: leaverou.github.io/conic-gradient – yunzen
You will have to include 2 javascript files in your project for it to work. What it will do is look for all the conic-gradient css properties in your document and replace those with
a background-image generated based on the conic-gradient property values. So if your css property is loaded at the same time as the DOM, you can use this library and use conic-gradient as if it was supported by all the browsers.
However, if your css is generated after the DOM has loaded, you will have to use another approach which works by generating an image using the library, and then assign it instead of the conic-gradient css function:
var gradient = new ConicGradient({
stops: "gold 40%, #f06 0", // required
repeating: true, // Default: false
size: 400 // Default: Math.max(innerWidth, innerHeight)
});
console.log(gradient.svg); // SVG markup
console.log(gradient.png); // PNG image (fixed dimensions) as a data URL
console.log(gradient.dataURL); // data URL
console.log(gradient.blobURL); // blog URL
Pure css work-around (linear-gradient fallback)
If you are looking for a css-only approach (the main concern being that this library uses some computational power of the javascript thread to generate the images, which can become a big overheat depending on your use case), I will leave here a solution which proposes a pure-css fallback to the lack of support of conic-gradient, but you will lose the conic gradient effect, which may or may not be suited to your use case:
border: double 4px transparent;
background-image: linear-gradient(white, white), linear-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
background-image: linear-gradient(white, white), conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
background-origin: border-box;
background-clip: content-box, border-box;
The line with the conic-gradient will be ignored in the browser in which it isn't supported, leaving the linear gradient as a fallback. So you will lose the conic effect but have a decent visual fallback.
The advantages of the second solution is to free your Javascript thread from generating images to replace the conic-gradient, and as time goes you won't have to update your code if conic-gradient gets supported.