This article is translated from How to create background pattern using CSS & conic-gradient, author: Temani Afif, with slight modifications.
Having a good background pattern can make your website design stand out. Thanks to CSS gradients, we can create fancy and cool patterns with just a few lines of code. In this article, we will learn about conic-gradient and use it to create different CSS patterns.
How do conic gradients work?
A cone gradient begins at a specified center of a circle, similar to a radial gradient, except that the cone gradient color stops are placed around the circumference of the circle rather than on a straight line emerging from the center, allowing for a smooth transition of color as it rotates around the center of the circle. Transition from the center to the outside.
Here’s a picture from the MDN page:
Let’s take a basic example to see how it works:
background: conic-gradient(at 75% 25%, red, blue, yellow)
We place the center point at X=75% and Y=25% and then create a color transition between red, blue and yellow.
In most cases we don’t want smooth transitions, but different color values. To do this we need to make the color start where the previous one ended:
background: conic-gradient(at 75% 25%, red 90deg, blue 90deg 225deg, yellow 225deg)
Note that the same angle is used between the two colors (90deg and 225deg). The code can be further optimized, like below.
background: conic-gradient(at 75% 25%, red 90deg, blue 0 225deg, yellow 0)
By specifying 0 (less than the previous value), the browser will automatically make it equal to the previous value. This prevents us from writing the same value twice. The final effect is as follows:
Keep the same center point as the rendering above, but without the transition between colors. Red fill 90deg. Blue starts where red ends and continues until 225deg, so it fills in 135deg. Yellow fills the remaining 135deg space.
If we define a background-size, we create a pattern:
This isn’t a pretty pattern effect, but it illustrates the techniques we’ll use in this article to build better pattern effects!
Chessboard pattern
We start with a basic pattern:
Below is the diagram to understand the logic of this pattern:
You can see that the center of our circle is placed in the center of the background area (the default position), so we don’t need to define it. Then we have 4 colors (2 white and 2 black), each filling 90deg (area ratio 25%). The code is:
background: conic-gradient(#000 90deg, #fff 0 180deg, #000 0 270deg, #fff 0);
Continue to optimize the syntax using repeated gradient code:
background: repeating-conic-gradient(#000 0 90deg, #fff 0 180deg);
We can also use percentages instead of degrees:
background: repeating-conic-gradient(#000 0 25%, #fff 0 50%);
All we have to do is update the background-size to control the proportion of the pattern display grid.
background-size: 100px 100px;
Zigzag pattern
Next we create a fancier pattern effect, this time we will use two gradients.
In this effect we will study the from option, which allows us to control the rotation of the gradient.
In the example above, each gradient consists of two colors. The first color fills 90deg, while the second color fills the remaining space. The only difference between the two gradients is the rotation. The first gradient is rotated -45deg, while the second gradient is rotated 135deg.
These two gradients added together give the following result.
The code corresponding to (1) above is as follows:
background: conic-gradient(from -45deg,#ECEDDC 90deg,#0000 0), conic-gradient(from 135deg,#ECEDDC 90deg,#29AB87 0); background-size: 100px 100px;
This is not the result we want. To get the results we want, we need to move the second gradient code as shown in (2) to get the following code:
background: conic-gradient(from -45deg,#ECEDDC 90deg,#0000 0), conic-gradient(from 135deg,#ECEDDC 90deg,#29AB87 0) 50px 0; background-size: 100px 100px;
50px 0 is just the background-position of the second gradient, and 50px is half of the background-size.
The code can be further optimized by introducing CSS variables:
--s: 100px; --_g: #ECEDDC 90deg,#0000 0; background: conic-gradient(from -45deg,var(--_g)), conic-gradient(from 135deg,var(--_g)) calc(var(--s)/2) 0, #29AB87; background-size: var(--s) var(--s)
Drawing pattern
For this pattern we will use two similar gradients, but this time with different sizes. In addition to background-position, we will see that using background-size can also help us create patterns.
The first gradient is defined as follows:
The final effect of background-size after setting 100px is as follows:
The second gradient is the same, but instead of 2px 2px we use 1px 1px to have thinner lines and we divide the size by 5. This will give us the logical result of a small square within a larger square (5×5 grid).
background: conic-gradient(from 90deg at 2px 2px,#0000 90deg,#366 0) 0 0/100px 100px, conic-gradient(from 90deg at 1px 1px,#0000 90deg,#366 0) 0 0/20px 20px;
Optimized code using CSS variables:
--s: 100px; --_g: #0000 90deg,#366 0; background: conic-gradient(from 90deg at 2px 2px,var(--_g)) 0 0/var(--s) var(--s), conic-gradient(from 90deg at 1px 1px,var(--_g)) 0 0/calc(var(--s)/5) calc(var(--s)/5);
Triangle pattern
After these three simple patterns we can use the same technique for more complex pattern effects, next creating some triangle patterns.
For this pattern effect, the following gradient code can be broken down:
Similar to the zigzag pattern, we use the offset of the second gradient of background-position to obtain the following code:
--s: 120px;
background:
conic-gradient(from 150deg at 50% 33%,#FA6900 60deg,#0000 0)
calc(var(--s)/2) calc(var(--s)/1.4),
conic-gradient(from -30deg at 50% 66%,#D95B43 60deg,#ECD078 0);
background-size: var(--s) calc(var(--s)/1.154);
There are also two triangle patterns below. I won’t analyze the detailed code implementation process one by one here. If you are interested, you can try to implement it.
The code may look complicated, but if you follow the implementation process above, you can easily understand it.
Star pattern
Why not try a star pattern!
Here is a step-by-step demonstration to illustrate the different gradients
As you can see, each gradient is easy to understand and all combinations give us a good result. This is the power of gradients, we combine basic shapes together to get a complex pattern.
More pattern effects
Before we wrap up, let’s look at some other pattern effect examples to show you how powerful conic-gradient() can be when creating fancy patterns!
Conclusion
After we see different examples, you should be able to create cool patterns using conic-gradient(). You may find this difficult, but with some practice you will become comfortable with the different techniques and you can create your patterns easily.
Combining different gradients is another way to get more pattern. I have made many examples and you can find more interesting pattern effects on this website css-pattern.com.
If you find this article useful, remember to give it a like and support it. You may use it someday if you save it~
Focus on front-end development, share front-end related technical information, public account: Nancheng Big Front-end (ID: nanchengfe)