Conical Gradient

conical gradient
We will use CSS filter and backgrounds made with linear gradients.

conical gradient

Setting up HTML

Giving dimensions

Background color is set for visibility, we will remove it later.

black square

Make circle

elliptical div

It’s not look like a circle as container is a block element which means its width spreads throughout the page. You can check it by setting the background of container :

elliptical div with red background

Fix it by using fixed positioning :

black circle

Now its width is independent of the width of the page but it grows as much as to cover its children.

Centering inside the page

Add the well known code for centering :

black circle at centre

Setting up pseudo elements

We will use pseudo elements (:before and :after elements). First set up :before such that it covers the parent element and set its background for its visibility :

red circle

position:relative; is important in parent element if you want to use position:absolute; in children elements. We will set two sets of backgrounds (one in :before and one in :after). :before will cover the upper half portion and :after will cover the lower half. Change the bottom property of :before such that it covers upper half :

red and black circle

Set a set of backgrounds to :before

Set the first linear gradient :

circle with red and black gradient

Set the red color using hsl() function :

Make the gradient hard-edged :

circle with red and black hard edged gradient

Rotate that gradient by 45 degrees :

circle with red cone

As you can see the line of separation of colors not passing through the center. Change the value of bottom to the prevous value again :

red and black circle

So here it is passing through center. It is passing through the center when the child element (:before) has dimensions same as that of its parent (div with class conical-grad). So what we are gonna do now is that we will set background size same as that of that parent with bottom:50%;

circle with red cone

Similarly add the second background, but now with 90 degree rotation :

circle with red quarter

Change the hue of previously added gradient by 45 degrees :

circle with red and yellow cones

Similarly add two more backgrounds by shifting each one sequentially by 45 degrees (both gradient rotation and hue rotation) :

circle with four colored cones

Remove the background from conical-grad :

circle with four colored cones

Set a set of backgrounds to :after

First set the same properties of :before to :after

Set its bottom to zero :

circle with red semicircle and three colored cones

Rotate whole :after element by 180 degrees

circle with red semicircle and four colored cones

Actually it’s drawn over the :before, we have to lower its stack order :

circle with four pairs of colored cones

As the backgrounds are same as in :before, but still copy those backgrounds to :after and shift each one’s hue by 180 degrees :

circle with eight colored cones

Why we aren’t using “filter:hue-rotate(180deg)” ?

Actually I have tried that but that is producing dull colors and I don’t know why.

Now the magic

conical gradient

Add border and shadows (optional)

conical gradient

Whole code :

As CSS filters do not work in IE, this conical gradient won”t work in IE. Code is also available at https://codepen.io/zFunx/pen/MrmrLx.