Conic gradient patterns

April 1, 2020 By Temani Afif

I am going to share some background patterns that you can build using conic-gradient(). Let’s first have a quick look at how such a gradient works.

From the CSS Specification we can read:

A conic gradient starts by specifying the center of a circle, similar to radial gradients, except that conic gradient color-stops are placed around the circumference of the circle, rather than on a line emerging from the center, causing the color to smoothly transition as you spin around the center, rather than as you progress outward from the center.

Here is an illustration to better visualize the difference where in both cases we have the following coloration: red – blue – white

CSS Conic Gradient

Syntax

conic-gradient( from <angle> at <position>, <color-list>)
repeating-conic-gradient( from <angle> at <position>, <color-list>)

The color-list is trivial and works the same way as any gradient.

The position defines the center of the gradient (the same as with radial-gradient) and it’s not a mandatory property (by default its value is set to center).

The angle will define a rotation of the gradient around its center (by default there is no rotation, so 0deg). It’s also not a mandatory property.

Below a comparaison between:

  • conic-gradient(red,blue,white) [on the left]
  • conic-gradient(from 90deg at 20% 20%,red,blue,white) [on the right]

Conic Gradient

Patterns

Consider the browser support: https://caniuse.com/#feat=css-conic-gradients. The below may not work in all the browsers.

background:
   repeating-conic-gradient(
     transparent 0 0.25turn,
     #c39f76 0.25turn 0.5turn
   ) 0/100px 100px;
background:
   repeating-conic-gradient(at 70% 50%,
     transparent 0 60deg,
     #c39f76 61deg 120deg,
     transparent 121deg 180deg
   ) 30px 0/100px 100px;
background:
   repeating-conic-gradient(
     transparent 0 60deg,
     #c39f76 61deg 120deg,
     transparent 121deg 180deg),
   repeating-conic-gradient(
     transparent 0 60deg,
     #c39f76 61deg 120deg,
     transparent 121deg 180deg) 0 50px;
background-size:100px 100px;
background:
   repeating-conic-gradient(
     transparent 0 60deg,
     #c39f76 61deg 120deg,
     transparent 121deg 180deg),
   repeating-conic-gradient(
     transparent 0 60deg,
     #c39f76 61deg 120deg,
     transparent 121deg 180deg) 50px 50px;
background-size:100px 100px;
background:
   conic-gradient(at left center,
      transparent 0 63.4deg,
      #c39f76 64deg 116.6deg,
      transparent 117deg
    ) 0 /100px 100px;
background:
   conic-gradient(at 0% 50% ,
      transparent 0 63.4deg,
      #c39f76 64deg 90deg,
      transparent 90deg),
   conic-gradient(from 180deg at 100% 50% ,
      transparent 0 63.4deg,
      #c39f76 64deg 90deg,
      transparent 90deg);
background-size:100px 100px;
background:
    repeating-conic-gradient(
       #c39f76 0 30deg,
       transparent 31deg 60deg,
       #c39f76 61deg 90deg
    ) 50px 50px/100px 100px;
background:
    conic-gradient(from 58deg  at 72% 60%,
      #fff 1deg 108deg ,
      transparent 109deg),
    conic-gradient(from 126deg at 50% 77%,
      #fff 1deg 108deg,
      transparent 109deg),
    conic-gradient(from 162deg at 50% 0,
      #c39f76 1deg 36deg,
      transparent 37deg),
    conic-gradient(from 90deg  at 0% 40%,
      #c39f76 1deg 36deg,
      transparent 37deg);
background-size:100px 100px;
background:
    conic-gradient(from 90deg at 50% 40%,
      transparent 1deg 50deg,
      #fff 51deg 129deg,
      transparent 130deg),
    conic-gradient(from 90deg at 50% 0,
      transparent 1deg 50deg,
      #c39f76 51deg 129deg,
      transparent 130deg);
  background-size:100px 100px;
background:
    conic-gradient(from -90deg at 33.33% 33.33%,
      #c39f76 0 90deg,transparent 0) 0 0,
    conic-gradient(from -90deg at 33.33% 33.33%,
      #c39f76 0 90deg,transparent 0) -20px 33.33px,
    conic-gradient(from -90deg at 33.33% 33.33%,
      #c39f76 0 90deg,transparent 0) -30px 66.66px;
background-size:100px 100px;
background:
    conic-gradient(from -90deg at 33.33% 33.33%,
      #c39f76 0 90deg,transparent 0) 0 0,
    conic-gradient(from -90deg at 33.33% 33.33%,
      #c39f76 0 90deg,transparent 0) 33.33px 33.33px,
    conic-gradient(from -90deg at 33.33% 33.33%,
      #c39f76 0 90deg,transparent 0) 66.66px 66.66px;
background-size:100px 100px;

Find below a codepen if you want to play with the different patterns: