about:config<\/code>, look for the layout.css.conic-gradient.enabled<\/strong> flag and set its value to true<\/code> (it’s false<\/code> by default and all it takes to switch is double-clicking it).<\/p>\n\n\n\n![\"Screenshot.](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/ff_flag.png?ssl=1\")
Enabling conic gradients in Firefox 75+<\/figcaption><\/figure>\n\n\n\nWith that enabled, now we can test our CSS including conic gradients in Firefox as well.<\/p>\n\n\n\n\n\n\n\n
While some of the demos in this article work just fine when using a polyfill<\/a>, some use CSS variables inside the conic gradient and therefore require native support for this feature.<\/p>\n\n\n\nOne thing I particularly like about conic gradients is just how much they can simplify background<\/code> patterns. So let’s take a few linear-gradient()<\/code> patterns from the gallery<\/a> created by Lea Verou about a decade ago and see how we can now simplify them with conic-gradient<\/code>!<\/p>\n\n\nPyramid<\/h3>\n\n\n![\"Screenshot.](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/pattern_0_ini.png?ssl=1\")
The pyramid pattern<\/figcaption><\/figure>\n\n\n\nThe pattern above uses four linear gradients:<\/p>\n\n\n\n
background:\n linear-gradient(315deg, transparent 75%, #d45d55 0) -10px 0,\n linear-gradient(45deg, transparent 75%, #d45d55 0) -10px 0,\n linear-gradient(135deg, #a7332b 50%, transparent 0) 0 0,\n linear-gradient(45deg, #6a201b 50%, #561a16 0) 0 0 #561a16;\nbackground-size: 20px 20px;<\/code><\/pre>\n\n\n\nThat’s quite a bit of CSS and perhaps even a bit intimidating. It’s not easy to just look at this and understand how it all adds up to give us the pyramid pattern. I certainly couldn’t do it. It took me a while to get it, even though gradients are one of the CSS features I’m most comfortable with. So don’t worry if you don’t understand how those gradients manage to create the pyramid pattern because, one, it is<\/em> complicated and, two, you don’t even need to understand that!<\/p>\n\n\n\nUsing conic-gradient()<\/code>, we can now get the same result in a much simpler manner, with a single background<\/code> layer instead of four!<\/p>\n\n\n\nWhat I like to do when coding repeating patterns is draw equidistant vertical and horizontal lines delimiting the rectangular boxes defined by the background-size<\/code>. In this case, it’s pretty obvious we have square boxes and where their limits are, but it’s a really useful technique for more complex patterns.<\/p>\n\n\n\n![\"Annotated](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/pattern_0_box.png?ssl=1\")
Highlighting the pattern’s cells<\/figcaption><\/figure>\n\n\n\nBy default, conic gradients start from 12 o’clock and go clockwise. However, in our case, we want to offset the start of the gradient by 45\u00b0 in the clockwise direction and afterwards make every one of the four shades occupy a quarter (25%) of the available space around the midpoint of our square box.<\/p>\n\n\n\n![\"SVG](\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/04\/pattern_0_struct.svg\")
A pattern cell with a conic gradient’s hard stops at every 25%<\/code> starting from 45\u00b0 w.r.t. the vertical axis (live<\/a>).<\/figcaption><\/figure>\n\n\n\nThis means our pyramid pattern can be reduced to:<\/p>\n\n\n\n
$s: 20px;\nbackground:\n conic-gradient(from 45deg, \n #561a16 25%, \n #6a201b 0% 50%, \n #a7332b 0% 75%, \n #d45d55 0%) \n 50%\/ #{$s $s};<\/code><\/pre>\n\n\n\nNot only does the code look simpler, but we’ve also gone from 260 bytes to 103 bytes, reducing the code needed to get this pattern by more than half.<\/p>\n\n\n\n
We’re using the double position<\/a> syntax as that’s also well supported these days.<\/p>\n\n\n\nWe can see it in action in the Pen below:<\/p>\n\n\n\n