Here is an overview of what you’ll be building:

You can also check my online collection to see up to 20 variations using a zig-zag shape.

We won’t study all the variations but I will show you a few tricks that’ll help you create as many variations as you want.

How to Create a Zig-Zag Shape

The first step is to create a zig-zag shape. For this, you can grab the code from my CSS shape website: https://css-shape.com/zig-zag-line/.

You can adjust the different variables to get the zig-zag you want. In our case, I will use an easier version with no variables.

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  background:
   conic-gradient(from 135deg at top,#000 90deg,#0000 0) top,
   conic-gradient(from 135deg at top,#0000 90deg,#000 0) bottom;
  background-size: 20% 50%;
  background-repeat: repeat-x;
}

And here is a figure to illustrate how those gradients create the shape:

The first gradient created the red part while the second one created the green part. We have two triangle shapes that repeat horizontally.

Since we have five repetitions, I used aspect-ratio: 5 and 20% (100%/5) in the background-size. You can make it more generic by introducing a variable to control the number of repetitions but as I said previously, I am going to keep things simple.

I want to point out that when using gradients, you can achieve the same result by using different syntaxes. For example, I can update the previous code with the following:

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  background:
   conic-gradient(from 135deg at top   ,#000 90deg,#0000 0),
   conic-gradient(from -45deg at bottom,#000 90deg,#0000 0) 12.5% 100%;
  background-size: 20% 50%;
  background-repeat: repeat-x;
}

It’s still the same output but with a different syntax for the second gradient. Did you notice the repeated part within the gradients? That part controls the coloration and we can define it as a variable to avoid repetition and be able to update the color only once in the code.

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  --c:#000 /* the color */ 90deg,#0000 0;
  background:
   conic-gradient(from 135deg at top   ,var(--c)),
   conic-gradient(from -45deg at bottom,var(--c)) 12.5% 100%;
  background-size: 20% 50%;
  background-repeat: repeat-x;
}

Now we have our zig-zag shape and we are ready to animate it.

How to Animate the Zig-Zag Shape

Since we’re using a background, we’ll animate the background-position to get our first loader. The idea is to move the gradients horizontally and create an infinite movement.

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  --c:#000 /* the color */ 90deg,#0000 0;
  background:
   conic-gradient(from 135deg at top   ,var(--c)),
   conic-gradient(from -45deg at bottom,var(--c)) 12.5% 100%;
  background-size: 20% 50%;
  background-repeat: repeat-x;
  animation: loading .8s infinite linear;
}

@keyframes loading {
  0%   {background-position: 0   0,12.5% 100%}
  100% {background-position: 25% 0,37.5% 100%}
}

Note how we increased the X value of the background-position by 25%. In case you are wondering what the logic behind that value is, here is the formula:

0.2 / (1 - 0.2) = .25 = 25%

.2 corresponds to the 20% used inside the background-size.

We have our first loader! Actually, two loaders because we can easily change the direction of the movement by adding animation-direction: reverse.

Let’s try a different animation: using clip-path and the inset() value. We can easily adjust this technique to create many variations.

Let’s start with a basic example:

.loader {
  /* same code as previously */
  animation: loading .8s infinite linear;
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

The inset() value creates a rectangle where only the part inside it will be visible. For this, we define a distance from each side of the element (top, right, bottom, left).

Logically, inset(0 0 0 0) shows the whole element since all the distances are equal to 0, but inset(0 100% 0 0) completely hides the element since the right value is equal to 100%. So it will touch the opposite edge, creating an empty rectangle.

By animating that right value from 100% to 0 we create a reveal animation. Another loader variation!

If you inspect the code of the second animation, you will see that I did the same thing but with the left side.

We can also have a sliding effect if we animate both the left and right values while keeping their difference constant.

.loader {
  /* same code as previously */
  animation: loading .8s infinite linear;
}
@keyframes loading {
  0%   {clip-path: inset(0 60% 0 0  )}
  100% {clip-path: inset(0 0   0 60%)}
}

The right value animates from 60% to 0 and the left one from 0 to 60%, so we have a constant difference equal to 60% which will create the illusion of a sliding rectangle. Another cool loader!

By trying different combinations of inset() values, you can get a lot of CSS loaders. Give it a try! You can also check my online collection and try to identify the variations that use clip-path: inset().

How to Create a Discrete Animation

To achieve a discrete animation, you can use the steps() timing function instead of linear. Let’s start with the first example using steps(2).

We can do the same with almost all the variations. Let’s try with the ones that use clip-path: inset().

.loader {
  /* same code as previously */
  animation: loading .8s infinite steps(5);
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

We have five repetitions so let’s see what we’ll get with steps(5).

At the moment, it’s not good because we don’t see all the repetition. The animation stops at 4 repetitions, but we need to see the whole element (5 repetitions). The count starts from 0 so what we really need is 6 steps instead of 5 to show all the repetitions.

.loader {
  /* same code as previously */
  animation: loading .8s infinite steps(6);
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

Even with 6 steps, the result is still not good but don’t worry, it’s not a bug. The default behavior of steps() gives us that output but we can update it to get the expected output:

.loader {
  /* same code as previously */
  animation: loading .8s infinite steps(6,jump-none);
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

If you’re not familiar with jump-none, it’s a value that can fix most of your issues when working with steps(). I wrote a short article about it if you want more details: “How to correctly use steps() with animations“

Our animation looks perfect now! We can also make it an 11-step animation (5×2 + 1) and get another cool loader.

Even the sliding effect can have its discrete variation.

Can you figure out why I am using 4 and 7 steps? I’ll let you do the calculation as a small exercise.

Conclusion

This article showed you how to create zig-zag shapes, how to animate them using clip-path, and how to make a discrete animations. You can also consider more tricks like using both pseudo-elements to have two shapes.

I didn’t explore all the variations but you now have the recipe to create most of them!

You can explore my Zig-Zag loaders collection to study other variations and try to create your own loader. It’s a good opportunity to practice what you have learned from this article.

I think a demo is worth thousands of words, so check out this Codepen:

In the above Pen, I’m showing you four different CSS filler-style loaders – but we can make even more. You can check out this collection I created to see more than 20 different loaders.

You might think the article is going to be super long – I mean, how long will it take to explain how to create 20 different CSS loaders?

Well don’t worry – this tutorial will be super quick, because I’ll show a few CSS tricks that help you create as many variation as you want. The loaders look different, but all of them rely on the same techniques. By simply adjusting a few setting you can get a whole new loader.

The Initial Loader Configuration

Like all the CSS Loaders I create, the HTML code is a simple as a single element. Nothing more! Here’s what it looks like:

<div class="loader">Loading</div>

Then we apply the following CSS:

.loader {
  font-weight: bold;
  text-transform: uppercase;
  color: #0000; /* or transparent */
  -webkit-text-stroke: 1px #000;
}

Nothing fancy so far. We make the text transparent and we add a black stroke to it. Here’s what that looks like:

The -webkit-text-stroke is still tagged as experimental, but it has good browser support so you should be able to use it without any issues. This said, it’s always good to test your code in different browsers to make sure everything works fine.

How to Fill the Text with Colors

Now it’s time to fill our text (that’s why this technique is called the Filling CSS loaders!). To do this, we are going to rely on gradients and background-clip: text. Here’s the code:

.loader {
  background-image: conic-gradient(#000 0 0);
  background-position: left;
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-clip: text;
}

Or the shorthand version if you prefer more compact code:

.loader {
  background: 
    conic-gradient(#000 0 0) text
    left/40% 100% no-repeat;
}

The above figure illustrates the difference between using or not using background-clip: text. It’s pretty clear that the left result is what we are aiming for. We are limiting the background coloration to only the text instead of the whole element.

The conic-gradient(#000 0 0) looks strange, right? It lets you have a one-color gradient. I wrote a small tip about it that I invite you to read to understand why we’re using that particular syntax in this article, “How to correctly define a one-color gradient“.

How to Create the Filling Loaders

Believe it or not, we’re almost done because we have everything we need to make the CSS loaders. For the first loader, we simply animate the background-size as follows:

#l1 {
  animation: l1 1s linear infinite;
}
@keyframes l1 {  /*  width  height */
  0% {background-size: 0%   100%}
  to {background-size: 120% 100%}
}

We start with a width equal to 0% until we reach a width equal to 120%. I could have used 100%, but I want the full coloration to stay longer so I am using a value bigger than 100%. As for the height (the second value of the background-size), it remains at 100%.

The second loader uses the same animation, but instead of a linear timing function, we use steps() to have a discrete animation.

#l2 {
  font-family: monospace;
  animation: l2 2s steps(8, jump-none) infinite;
}
@keyframes l2 {
  0% {background-size: 0%           100%}
  to {background-size: 100% 100%}
}

The text contains 7 characters so we use 8 steps (N + 1). I am also using a monospace font to make sure all the characters have the same width. In case you are wondering about the jump-none value, read the following: How to correctly use steps() with animations.

That’s basically the main trick. By animating the background properties, we create different kinds of loaders. It’s either the background-size like the previous ones or the background-position like the below:

Can you figure out how they work before checking my code? This will be your first homework!

How to Use Multiple Gradients

Using one gradient is enough to create a lot of variations – but we can do even more if we introduce multiple gradients. If you check the fourth loader of the first demo, you’ll see that I’m using seven gradients – one gradient per character.

#l4 {
  font-family: monospace;
  --g: conic-gradient(#000 0 0) no-repeat text;
  background: var(--g) 0,var(--g) 1ch,var(--g) 2ch,var(--g) 3ch,var(--g) 4ch,var(--g) 5ch,var(--g) 6ch;
  background-position-y: bottom;
  animation: l4 3s infinite;
}
@keyframes l4 {
  0%     {background-size: 1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  14.28% {background-size: 1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  28.57% {background-size: 1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  42.85% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  57.14% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   }
  71.43% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   }
  85.71% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   }
  100%   {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%}
}

I’m using the same gradient, so we consider a CSS variable --g to avoid repetition. Then, I call that variable 7 times inside the background property. All the gradients have the same Y position (bottom) but a different X position. That’s why you see the 0, 1ch, 2ch, …,6ch.

Now if you check the animation, I’m simply animating the height of each gradient individually. At 0%, all of them have a height equal to 0. Then I update their height one by one until all of them are at 100%. The width doesn’t change – it’s always equal to 1ch (the width of one character).

It may look difficult at first glance, but if you think about it one gradient at a time, it’s pretty simple.

What about the third loader, you might ask? For that one, I will rely on my online generator for wavy shapes to generate the gradient configuration:

Then I animate the background-position like below:

#l3 {
  background:
    radial-gradient(1.13em at 50% 1.6em,#000 99%,#0000 101%) calc(50% - 1.6em) 0/3.2em 100%,
    radial-gradient(1.13em at 50% -0.8em,#0000 99%,#000 101%) 50% .8em/3.2em 100% repeat-x;
  background-clip: text;
  animation: l3 2s linear infinite;
}
@keyframes l3 {
  0% {background-position: calc(50% - 1.6em) 0,     50%          .8em}
  to {background-position: calc(50% + 1.6em) 0,calc(50% + 3.2em) .8em}
}

This one is probably a bit trickier, but it’s another example to illustrate all the possibilities. From the simple gradient configuration to the most complex one, we can create as many loaders as we want.

What about creating your own CSS loader? You can use what you have learned from the article and try to create a loader that is not part of my collection. The best way to learn is to practice – so give it a try!

Conclusion

By creating some cool loaders, we went through a bunch of CSS tricks related to gradients and backgrounds. Even if creating loaders is not your goal, you can always re-use the same tricks to do something else.

Don’t forget to check my CSS Tip blog where I am sharing cool CSS tricks and demos.

Here is an overview of the shapes we’ll look at here, applied to the header of my freeCodeCamp profile:

Cool right? Both designs are commonly used as section dividers. We will learn together how to create such shapes with some simple code.

Before we start, you can find the code of the shapes we are making (and more!) within my online collection. You can easily copy the code from there – but don’t go away right now! Understanding the logic behind the code is also important and will help you customize it to fit your needs.

How to Create a Rounded Edge using clip-path

Let’s start with the first shape: The rounded edge. It may sound surprising, but the code to create such a shape is as simple as one CSS declaration:

.rounded-edge {
  clip-path: ellipse(85% 100% at top);
}

Let’s draw a figure to understand how an “ellipse” creates a rounded edge shape.

We start with a rectangle element with no clip-path applied to it. Then, we add clip-path: ellipse(50% 100% at top). As you can see, we have the ellipse shape. Its center is at the “top center” of the element and its radii are equal to 50% horizontally and 100% vertically. The shape is overflowing the element boundaries, which is why we only see the bottom half part of it. The top half is clipping nothing.

So you might be wondering: I said “top center”, but why in the code do we only have “top”?

By default, if we don’t specify the position it will be the center of the element. This is equivalent to “center”, “center center”, “50%” or “50% 50%”. Note how we can either define one value or two values. If the second value is omitted, it will be equal to “center” so defining “top” is the same as “top center”.

You don’t need to remember all the cases. Using the keywords such as "top”, “left”, and so on is, most of the time, enough – unless you need to create a custom shape (we will see this later on).

Let’s get back to the previous figure. If we increase the horizontal radius and make it bigger than 50% (85% for example), the ellipse will get bigger and will logically cover a bigger area. You start to see the trick, right? In the end, it’s only a portion at the bottom of the ellipse that is visible – the rounded edge we want!

As a bonus, it’s responsive, since we are relying on percentage values. The horizontal radius is relative to the width while the vertical one is relative to the height. This said, you can also rely on pixel values if you want a fixed size for your ellipse. In some cases, it can give a better result.

Here is a demo showing both cases. Resize the screen to notice the difference:

So what about the other variation? We just have to change “top” with “bottom”, right?

Exactly! By changing the center of the ellipse, you change the placement of the rounded edge and easily get the four directions.

You can also get a more custom shape if you adjust the center of the ellipse using percentage values. Like for example using 30% 0% to get a rounded edge shifted to the left (note that top is equivalent to 50% 0%).

A lot of possibilities with only one line of code!

Go check the online version where you can find more examples and easily customize the shape by adjusting the existing code.

How to Create a Curved Edge using mask

Let’s move to the second shape: the curved edge. This one is also pretty easy to create as it requires one line of code as well.

.curved-edge {
  mask: radial-gradient(60% 70px at bottom,#0000 100%,#000);
}

This time, we are going to rely on mask instead of clip-path but the logic is the same. We will hide some parts of the element and keep the remaining visible. When using mask, the hidden part is the transparent color of the gradient (the #0000) while the visible part is the opaque color of the gradient (the #000).

It doesn’t really matter which color you use, only the transparency of the color matters. So you are free to use any color syntax you want. Here’s an example using the rgb() syntax:

.curved-edge {
  mask: radial-gradient(60% 70px at bottom,rgb(0 0 0/0%) 100%,rgb(0 0 0/100%));
}

Or color names:

.curved-edge {
  mask: radial-gradient(60% 70px at bottom,transparent 100%,black);
}

And here is a figure to illustrate how it works.

Similar to the ellipse function of the clip-path, the radial-gradient() will also create an ellipse shape. The only difference is that this time we will hide the inside part of the ellipse and show the outside part. And thanks to the overflowing part, we get the curved shape we want.

I think you know the rest of the story now. By adjusting the radii and the position of the center of the ellipse, we get the different variations. As a small homework assignment, try to update the previous code to get the top, left, and right directions. You can compare what you have found with my implementation.

When using this method, make sure you have enough space at the bottom. Unlike the rounded edge, the curved edge may hide some of your content at the bottom so it’s always good to include a padding equal to the vertical radius.

.curved-edge {
  padding-bottom: 70px;
  mask: radial-gradient(60% 70px at bottom,#0000 100%,#000);
}

How to Combine Both of These CSS Shapes

What about having both curves so you can create a curved rectangle shape? It’s possible by simply combining both bits of code like this:

.curved-rectangle {
  /* curved edge at the bottom */
  mask: radial-gradient(60% 70px at bottom,#0000 100%,#000);
  /* rounded edge at the top */
  clip-path: ellipse(80% 100% at bottom);
}

See it in play:

And the opposite effect by changing bottom with top:

.curved-rectangle {
  /* curved edge at the top */
  mask: radial-gradient(60% 70px at top,#0000 100%,#000);
  /* rounded edge at the bottom */
  clip-path: ellipse(80% 100% at top);
}

You will notice that I am either using top everywhere or bottom everywhere which makes both pieces of code easy to remember.

Now you might be wondering – how can we have the same curves and the top and bottom?

As you may have noticed, both curves don’t match, which makes the whole shape kind of broken. But we can fix this. We need to make sure both parts of the code create the same ellipse shape by setting the same radii.

.curved-header {
  /* curved edge at the top */
  mask: radial-gradient(80% 100% at top,#0000 100%,#000);
  /* rounded edge at the bottom */
  clip-path: ellipse(80% 100% at top);
}

Note the “80% 100% at top” which is the same in both declarations – but nothing will be visible if we use this code. Don’t forget that the clip-path will hide the outside part of the ellipse while the gradient will hide the inside part. So if both ellipses are the same, everything will be hidden.

To fix this, we have to offset the gradient and move it to the top to get the following:

.curved-rectangle {
  /* curved edge at the top */
  mask: radial-gradient(80% 100% at 50% -78% /* instead of 50% 0% */,#0000 100%,#000);
  /* rounded edge at the bottom */
  clip-path: ellipse(80% 100% at top);
}

The shape is now perfect and both curves are aligned.

If you don’t like to use magic numbers like the “-78%”, we can consider some math to get accurate results:

.curved-rectangle {
  --c: 80; /* control the curve */

  mask: 
    radial-gradient(calc(var(--c)*1%) 100% 
     at 50% calc(-100%*cos(asin(50/var(--c)))),
     #0000 100%,#000);
  clip-path: ellipse(calc(var(--c)*1%) 100% at top);
}

The code looks more complex (I will skip the boring geometry explanation) but you can easily control the curve by adjusting a single value.

So what about the bottom version? We update the code like the below:

.curved-rectangle {
  --c: 80; /* control the curve */

  mask: 
    radial-gradient(calc(var(--c)*1%) 100% 
     at 50% calc(100% + 100%*cos(asin(50/var(--c)))),
     #0000 100%,#000);
  clip-path: ellipse(calc(var(--c)*1%) 100% at bottom);
}

The top of the clip-path becomes bottom and inside the gradient, we use 100% + X instead of -X where X is the offset. You can always find all the code within my online collection.

Wrapping Up

How many lines of code do you have to remember? Only two lines of code – that’s all! You can create a rounded edge using clip-path:

.rounded-edge {
  clip-path: ellipse(85% 100% at top);
}

And you can create a curved edge using mask:

.curved-edge {
  mask: radial-gradient(60% 70px at top,#0000 100%,#000);
}

And by combining both, you get a curved rectangle:

.curved-rectangle {
  mask: radial-gradient(80% 100% at 50% -78%,#0000 100%,#000);
  clip-path: ellipse(80% 100% at top);
}

You don’t have to remember the verbose version where I am using math. Most of the time, you don’t really need to have accurate values and you can manually adjust the position until you get it right.

Don’t forget to bookmark my online collection of CSS shapes if you want to easily copy the code of any shape. I also recommend reading my “Modern guide for making CSS shapes” to know the secret behind creating more CSS shapes.

In this tutorial, I will focus on some real and practical examples to explain the secrets behind radial-gradient() and how it works.

CSS Gradients are usually used to create fancy patterns, so I have selected a few of them made with only radial-gradient(). By building them, we will learn everything about these gradients.

radial-gradient pattern #1

Let's start with the most basic pattern.

Pattern made with radial-gradient

Nothing complex so far – we are simply repeating circles. Circles, ellipses, half-circles, a quarter of circles, and so on...all are different shapes that we can create using radial-gradient().

To make it simple, we can consider the ellipse as the main shape since a circle is a particular case of an ellipse. Then by hiding some parts we get half of a circle, a quarter of a circle, and so on.

Let's zoom in on the pattern to identify the different values.

Illustration of the different values of the pattern

We are drawing inside an area that has dimensions of 100px*100px which is our background-size. We will consider a horizontal radius equal to 50% and a vertical one equal to 50% and the center of our shape will be the center of the area.

An ellipse is defined with two radii called the "horizontal radius" and the "vertical radius". If both are equal (like in our case) we get a circle.

This will give us the following code:

html {
  background-image: radial-gradient(50% 50% at center, ???);
  background-size: 100px 100px   
}

We defined the setting of our gradient, and now we need to define the color configuration. We will draw a circle that will not touch the edge of the background-size area. From the 50%, we will have 80% of the main color and the remaining will be transparent.

html {
  background-image: radial-gradient(50% 50% at center, #c39f76 0% 80%,#0000 81% 100%);
  background-size: 100px 100px   
}

Basically, we first define the center and size of our ellipse (the 50% 50% at center) then we fill it with a gradient coloration (the c39f76 0 80%,#0000 81% 100%). We get a full circle in this case because both radii are equal ( 50% of 100px ) and because we have no transition between the colors.

We have the main color from 0% to 80% and transparent from 81% to 100%. (We should have used 80% instead of 81% but we keep a small transition to avoid jagged edges.)

We can optimize the above code by removing the default values to get this:

html {
  background-image: radial-gradient(50% 50%,#c39f76 80%,#0000 81%);
  background-size: 100px 100px   
}

The position is by default the center and we can omit 0% and 100% from the color configuration.

The above is not the only syntax to achieve that pattern. We can also use:

html {
  background-image: radial-gradient(40% 40%,#c39f76 99%,#0000);
  background-size: 100px 100px   
}

We reduce the radius of our circle and we increase the percentage of the main color. Note that I didn't define any percentage with the transparent color since it should be 100% (the default value) that we can omit.

We can also use:

html {
  background-image: radial-gradient(#c39f76 56%,#0000 57%);
  background-size: 100px 100px   
}

We omit the radius and the browser will use a default setting that needs another color configuration.

You don't have to memorize all the cases, just stick to one easy way (I recommend the first one). Later, with practice, you will discover different ways to achieve the same result and you will be able to optimize your syntax to reduce the amount of code used as I did with the last example.

radial-gradient pattern #2

Pattern made with radial-gradient

For this one, I will use 2 radial-gradient()s. Let's not forget that we can have as many background layers as we want. This is a great feature that allows us to build complex patterns by combining different gradients with different configurations.

We are keeping the same background-size here, but we are using different positions for our circles. The code will be the following:

html {
   background-image: 
     radial-gradient(?? at 25% 25%,??),
     radial-gradient(?? at 75% 75%,??);
   background-size: 100px 100px; 
}

For the radius configuration, if we do some math, we can find that we need 25% for both circles to touch the edges. So we can use this code:

html {
   background-image: 
     radial-gradient(25% 25% at 25% 25%,#c39f76 80%,#0000 81%),
     radial-gradient(25% 25% at 75% 75%,#c39f76 80%,#0000 81%);
   background-size: 100px 100px; 
}

We can also use closest-side instead of 25% 25%. I know, it's a strange value, but it means "use a value of radius that allows the circle to touch the closest side to its center". This value is useful and can save us from dealing with some complex calculations.

html {
   background-image: 
     radial-gradient(closest-side at 25% 25%,#c39f76 80%,#0000 81%),
     radial-gradient(closest-side at 75% 75%,#c39f76 80%,#0000 81%);
   background-size: 100px 100px; 
}

radial-gradient() provide us with 3 other similar values ( closest-corner, farthest-side, and farthest-corner). We either define an explicit size for our radius or we use those values and the browser will automatically find the radius based on specific rules.

As I said previously, you don't need to memorize everything. I am trying to focus on the basics of radial-gradient() while providing as much information as possible that you may use later.

radial-gradient pattern #3

I am increasing the difficulty with this one. After the 1st and 2nd patterns, we can now try a more complex pattern. This one is also made using two gradients where we will not have full circles but a combination of two half circles.

Below is an illustration to help you understand the puzzle. I am using different colors to easily identify each gradient.

The center for the first gradient is placed at 50% 100% while the second one is placed at 50% 0% but we can also use top and bottom as their equivalent values.

html {
   background-image: 
     radial-gradient(?? at top   ,??),
     radial-gradient(?? at bottom,??);
   background-size: 100px 100px; 
}

For the radius, we can use 50% 50% like we did before, but this time I will try something different and consider 50px which is half the background-size.

When using a pixel value or any unit that's different from a percentage, we can specify only one radius and the browser will understand that we want a circle with that radius. This is still another way to define the size of our shape in addition to percentage and the specific values.

Our circle is touching the edge so the code will be:

html {
   background-image: 
     radial-gradient(50px at top   ,#c39f76 99%,#0000),
     radial-gradient(50px at bottom,#c39f76 99%,#0000);
   background-size: 100px 100px; 
}

Yes, the above will not give us the pattern we're going for – we still need a final touch. If you check the previous illustration, you'll notice that the second gradient (the green one) is shifted to the right by half the size. In other words, we need to update its background-position:

html {
   background-image: 
     radial-gradient(50px at top   ,#c39f76 99%,#0000),
     radial-gradient(50px at bottom,#c39f76 99%,#0000);
   background-position: 0 0, 50px 0;
   background-size: 100px 100px; 
}

We can optimize the code a little by using the shorthand version:

html {
   background: 
     radial-gradient(50px at top   ,#c39f76 99%,#0000),
     radial-gradient(50px at bottom,#c39f76 99%,#0000) 50px 0;
   background-size: 100px 100px; 
}

And since we are dealing with pixel values, we can add a CSS variable to make the code easy to adjust.

html {
   --s: 100px;
   background: 
     radial-gradient(calc(var(--s)/2) at top   ,#c39f76 99%,#0000),
     radial-gradient(calc(var(--s)/2) at bottom,#c39f76 99%,#0000) calc(var(--s)/2) 0;
   background-size: var(--s) var(--s); 
}

Instead of updating different values, we change only one!

radial-gradient pattern #4

Pattern background made with radial-gradient

At first glance, this background looks a bit complex. But if we can identify the correct pattern it becomes easy.

This is the most difficult part when dealing with such a background. Sometimes it's not easy to identify the different background layers. My advice to get better at this exercise is to practice.

Intuitively, you may think that the pattern is this one and you will struggle to find the gradients

but it's not. The real pattern is this one

We have 4 circles placed at the corners with a small overflow. The code will be:

html {
   background: 
     radial-gradient(closest-corner at 20% 20%,#c39f76 98%,#0000),
     radial-gradient(closest-corner at 80% 20%,#c39f76 98%,#0000),
     radial-gradient(closest-corner at 20% 80%,#c39f76 98%,#0000),
     radial-gradient(closest-corner at 80% 80%,#c39f76 98%,#0000);
   background-size: 100px 100px;
}

A good use for closest-corner to define the radius. For each layer, the browser will draw a circle placed at a specific position and touch the closest corner. This setting allows us to use an easy color configuration while having the needed overflow.

We can also use closest-side like below:

html {
   background: 
     radial-gradient(closest-side at 20% 20%,#c39f76 140%,#0000 141%),
     radial-gradient(closest-side at 80% 20%,#c39f76 140%,#0000 141%),
     radial-gradient(closest-side at 20% 80%,#c39f76 140%,#0000 141%),
     radial-gradient(closest-side at 80% 80%,#c39f76 140%,#0000 141%);
   background-size: 100px 100px;
}

The only new thing in the above code is the color configuration where I am using values that are bigger than 100%. Since I am using closest-side to define the radius, I need to get bigger than 100% to create the overflow.

Don't forget such a trick, it can be helpful. The color values are not limited to the range [0% 100%] – they can go bigger.

In such situation, we can also rely on a CSS variable to avoid the repetition of the color configuration:

html {
   --c: #c39f76 98%,#0000;
   background: 
     radial-gradient(closest-corner at 20% 20%,var(--c)),
     radial-gradient(closest-corner at 80% 20%,var(--c)),
     radial-gradient(closest-corner at 20% 80%,var(--c)),
     radial-gradient(closest-corner at 80% 80%,var(--c));
   background-size: 100px 100px;
}

radial-gradient pattern #5

Pattern made with radial-gradient

Here's another non-intuitive pattern that may confuse many of you. You may see it as a circle that is half-filled and you might be wondering how it's possible to achieve that. In reality, it's a combination of two half circles like below:

And here's their code:

html {
  background:
    radial-gradient(50% 50% at left ,#0000 70%,#c39f76 71% 80%,#0000 81%),
    radial-gradient(50% 50% at right,#c39f76 0 80%,#0000 81%);
  background-size: 100px 100px;
}

This time, we are using a different color configuration for each one. The first one has 3 colors (transparent, then the main color, then transparent again). The second has the same color configuration we used with the previous examples.

This pattern is a good example to show how different colors configuration can be another way to get complex background patterns.

radial-gradient pattern #6

This is another pattern where it's not easy to identify the different layers – but if we look closely we can see two circles

The big circle is our first layer

It's a circle placed at the center of the area (defined with background-size as usual) but this time the color configuration is not as usual. I am using a transparent color for the inside part and the main color outside. It should be noted that we have a small overflow as well.

html {
  background-image: radial-gradient(54% 54%,#0000 98%,#c39f76);
  background-size: 100px 100px;
}

As you can see, I am using 54% instead of 50% to create the overflow.

The second layer is a smaller circle with white color as the main color. The whole code will be:

html {
  background: 
    radial-gradient(10% 10%,#fff 98%,#0000),
    radial-gradient(54% 54%,#0000 98%,#c39f76) 50px 50px;
  background-size:100px 100px;
}

Note the use of 50px 50px. Like with the 3rd pattern, we need to shift one of the layers by half the size to get the correct result – otherwise both circles will have the same center which is not the intended result.

radial-gradient pattern #7

Here's the last pattern before we end:

With this last example, I want to introduce repeating-radial-gradient() which is another way to write radial-gradient().

Our pattern is as follows:

We can achieve the above using radial-gradient() but the color configuration will get too lengthy (transparent, main color, transparent, main color, and so on).

In this case, the color configuration is nothing but a repeated pattern of "transparent, main color" and repeating-radial-gradient() is made for such a purpose. It allows us to define a pattern color configuration.

html {
  background-image: repeating-radial-gradient(#0000 0% 12%,#c39f76 13% 26% );
  background-size:100px 100px;
}

The above means that we have 12% of transparent color and then 13% of the main color ( 26 - 13 = 13) then we repeat the same until we cover all the area.

Wrapping up

Through exploring how to create different background patterns, we covered the basics of radial-gradient().

The article ends here, but this is just the beginning. radial-gradient() is more complex than the simple examples we just saw – but now you have the needed tools to practice and get used to it.

Go ahead and try to build your own pattern using radial-gradient(). If you need some inspiration, check my collection of CSS Patterns (more than 100 using CSS gradients). I also have another article about conic-gradient() if you want a follow up to this one.

Here’s another reference to get more details:

We will explore different section dividers made using only CSS and some optimized code that's easy to manipulate.

Here's an example of section dividers in action:

Overview of 2 sections Dividers applied to the FreeCodeCamp header

Before we dig into the technical part, I have created an online generator for section dividers. All you have to do is to select your configuration and get the CSS code in no time.

Alright, I can hear saying: "Why a boring tutorial? I'll simply use the generator whenever I need it!"

Sure, you can do that – but it's always good to know what's happening under the hood so you understand the code you are using and so you're able to manually adjust it.

Then you'll be able to create your own personalized divider after understanding the ones I made!

So let's dive in and learn how it's done.

How to Create a Slanted Divider for Your Website

Illustration of a slanted divider

In the above figure, we have two elements separated with a slanted gap. To achieve this effect, we will cut a portion from each one. Let's look at a step-by-step illustration to better understand.

A step-by-step illustration to create a slanted divider

Initially, we have two elements placed above each other. We first start by cutting the bottom part of the top element (step (2)) using clip-path like below:

clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - 50px));

We have a four points path where we make the bottom left one a bit higher to create the cut effect. You can notice the use of calc(100% - 50px) instead of 100%.

We do the same for the second element in step (3) using:

clip-path: polygon(0 0,100% 50px,100% 100%,0 100%);

This time we are lowering the top right corner by the same amount of pixels (50px instead of 0). If you are not familiar with clip-path, here is a figure to better see the points.

Illustration of the clip-path points

The points are nothing but x,y coordinates in a 2D space with the range [0 100%]. You can easily identify the four corners, and from there we can find any other points.

Finally, we add a negative margin-top to the second element to reduce the space and get a gap equal to 10px. The final code will be:

.top {
  clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - 50px));
}
.bottom {
  clip-path: polygon(0 0,100% 50px,100% 100%,0 100%);
  margin-top: -40px;
}

That's the code you will get from the the online generator I made. We can improve it by introducing CSS variables:

:root {
  --size: 50px; /* size of the cut */
  --gap: 10px;  /* the gap */
}
.top {
  clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--size)));
}
.bottom {
  clip-path: polygon(0 0,100% var(--size),100% 100%,0 100%);
  margin-top: calc(var(--gap) - var(--size));
}

As I said in the introduction, we have some simple code that's easy to adjust that produces a responsive section divider.

How to Create a Full-Width Arrow Divider for Your Website

Illustration of the full-width arrow divider

This one is pretty similar to the previous divider. We will simply deal with more clip-path points.

A step-by-step illustration to create a full width arrow divider

I think you probably have the idea by now. We follow the same steps and we end with the following code:

.top {
  clip-path: polygon(0 0,100% 0,100% calc(100% - 50px),50% 100%,0 calc(100% - 50px));
}
.bottom {
  clip-path: polygon(0 0,50% 50px,100% 0,100% 100%,0 100%);
  margin-top: -40px;
}

And below is another illustration to understand the new points we are using for this section divider.

Illustration of the clip-path points

At first glance, it may look difficult but it's really pretty easy.

We are creating shapes by linking different points inside the 2D space of our element. The trick is to create 2 "puzzle shapes" (I just coined this term) to create the illusion of a section divider. With some practice, you can easily create your divider by following the same logic.

Before we move to the next one here is the code using CSS variables:

:root {
  --size: 50px; /* size of the cut */
  --gap: 10px;  /* the gap */
}
.top {
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--size)),50% 100%,0 calc(100% - var(--size)));
}
.bottom {
  clip-path: polygon(0 0,50% var(--size),100% 0,100% 100%,0 100%);
  margin-top: calc(var(--gap) - var(--size));
}

You can already see a pattern in the code of our dividers since we are using the same technique. Two clip-path, a negative margin-top, and two CSS variables. As simple as that!

How to Create an Arrow Divider for Your Website

Illustration of the arrow divider

This divider is a bit trickier than the previous ones because I will add another variable which is the angle of the arrow. The technique remains the same but we will have more math to calculate the coordinates of the points.

For this one, my online generator will be very useful (especially if you're not comfortable with math formulas) so you can easily get the final values without trouble.

For the curious ones, here is the generic code:

:root {
  --size: 50px;   /* size of the cut */
  --gap: 10px;    /* the gap */
  --angle: 90deg; /* angle of the arrow */
}
.top {
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--size)),calc(50% + tan(var(--angle)/2)*var(--size)) calc(100% - var(--size)),50% 100%,calc(50% - tan(var(--angle)/2)*var(--size)) calc(100% - var(--size)),0 calc(100% - var(--size)));
}
.bottom {
  clip-path: polygon(0 0,calc(50% - tan((180deg - var(--angle))/4)*var(--gap) - tan(var(--angle)/2)*var(--size)) 0,50% calc(var(--size) + (1/sin(var(--angle)/2) - 1)*var(--gap)),calc(50% + tan((180deg - var(--angle))/4)*var(--gap) + tan(var(--angle)/2)*var(--size)) 0,100% 0,100% 100%,0 100%);
  margin-top: calc(var(--gap) - var(--size));
}

I can hear you screaming seeing this, but don't worry if you don't fully understand it. I am still creating different shapes using clip-path but this time the calculation is a bit more complex.

The above is valid CSS code but at the time of writing this, there is no support for trigonometric functions so it won't work in any browser. Either you calculate the values manually or use the online generator to get the clip-path values.

Until now, we have made 3 different dividers using the same technique. Each time we consider a new shape by playing with the clip-path values. You can create any divider using the same technique, and the combinations are unlimited. The only limit is your imagination.

It's a good exercise to get familiar with clip-path. What I recommend is using a pen and paper to draw the shape you have in mind. You identify the different points of your shape. Then you convert them into clip-path values.

You can find a lot of online tools that can help you. My favorite one is: https://bennettfeely.com/clippy/

How to Create a Rounded Divider for Your Website

Illustration of the rounded divider

For this divider, we are going to use mask instead of clip-path. The difference between clip-path and mask is that mask relies on images to cut/hide parts of an element. When talking about images we also talk about gradients.

Here is an illustration to understand what kind of gradients we need:

Illustration of the gradients used with the mask property

For the first element, we need two gradients: a linear-gradient() to create a rectangular shape at the top, leaving a space at the bottom, and a radial-gradient() to create a circle placed at the bottom. Both of them combined will give us the final shape for the first element.

The second element needs only one radial-gradient() to create a hole at the top to complete the puzzle.

Our code will be:

.top {
  mask: 
    linear-gradient(#000 0 0) top/100% calc(100% - 50px) no-repeat,
    radial-gradient(farthest-side,#000 98%,#0000) bottom/100px 100px no-repeat;
}
.bottom {
  mask: radial-gradient(60px at 50% -10px,#0000 98%,#000);
  margin-top: -40px;
}

And with CSS variables it will be:

:root {
  --size: 50px; /* size of the cut */
  --gap: 10px;  /* the gap */
}
.top {
  mask: 
    linear-gradient(#000 0 0) top/100% calc(100% - var(--size)) no-repeat,
    radial-gradient(farthest-side,#000 98%,#0000) bottom/calc(2*var(--size)) calc(2*var(--size)) no-repeat;
}
.bottom {
  mask: radial-gradient(calc(var(--gap) + var(--size)) at 50% calc(-1*var(--gap)),#0000 98%,#000);
  margin-top: calc(var(--gap) - var(--size));
}

Even with the mask method, the code pattern is still the same as the one using clip-path.

Wrapping up

Now, in addition to having a cool online generator for section dividers, you also know the secret behind creating them.

You may have noticed in the generator that each divider comes with 2 directions but I only explained one for each divider. I did this on purpose to let you try to understand what values we need to update to get the opposite direction. You can do it – it's not difficult and you will learn a lot by doing it.

I will be releasing more generators in the future so bookmark this link: https://css-generators.com/ and follow me on Twitter to not miss them.

You can easily find a lot of ready-to-use code for such a component, but they are not easy to update. You also have to deal with a lot of trial and error until you get them to work correctly.

In this post, I will show you how to create two types of ribbons with some simple CSS code where you don't need to bother yourself with tweaking a lot of values.

Here's what we'll create in this article:

Rotated Ribbon & Folded Ribbon

Below is the full code for both ribbons so you can see how simple it is:

  

    
Folded Ribbon
  
  
Rotated Ribbon
  
Rotated Ribbon

  .ribbon-1 {
    position: fixed;
    background: #08769b;
    box-shadow: 0 0 0 999px #08769b;
    clip-path: inset(0 -100%);
  }
  .left {
    inset: 0 auto auto 0;
    transform-origin: 100% 0;
    transform: translate(-29.3%) rotate(-45deg);
  }
  .right {
    inset: 0 0 auto auto;
    transform-origin: 0 0;
    transform: translate(29.3%) rotate(45deg);
  }

  .ribbon-2 {
    --f: 10px; / control the folded part/
    --r: 15px; / control the ribbon shape /
    --t: 10px; / the top offset /

    position: absolute;
    inset: var(--t) calc(-1var(--f)) auto auto;
    padding: 0 10px var(--f) calc(10px + var(--r));
    clip-path: 
      polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
        calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
        var(--r) calc(50% - var(--f)/2));
    background: #BD1550;
    box-shadow: 0 calc(-1var(--f)) 0 inset #0005;
  }


  .box {
    max-width:500px;
    height:200px;
    margin:50px auto 0;
    background:lightblue;
    position:relative;
  }

How to create a Rotated Ribbon with CSS

This type of ribbon is, in most cases, used to place a piece of fixed information on the top of the screen. But we can also use it inside an element within the page.

To understand how to create such a ribbon, let's look at a step-by-step illustration:

Step-by-Step illustration of the Rotated Ribbon

First, we start by placing our element on the top left corner of the screen. The red borders in the illustration are the boundaries of the screen (or the element where you want to place the Ribbon).

.ribbon {
  position: fixed;
  inset: 0 auto auto 0;
  background: #08769b;
}

Nothing complex so far. If you are not familiar with the inset property, it's nothing but the shorthand for top, right, bottom, and left.

Next, we perform a translation to the left by using translate(-29.3%).

After the translation, we rotate our element using rotate(-45deg) and the code becomes this:

.ribbon {
  position: fixed;
  inset: 0 auto auto 0;
  background: #08769b;
  transform-origin: 100% 0; /* or top left */
  transform: translate(-29.3%) rotate(-45deg);
}

You are probably wondering what is the secret of the strange value 29.3%? Well, it's equal to 100% * (1 - cos(45deg)).

I will avoid starting a "boring" math explanation, but you can see that after we did the rotation, the element is perfectly placed (both its top corners are touching the edges). The translation is the key to having that perfect placement.

You can also notice the use of transform-origin: top left. In the third step, I had to rotate the element from its top left corner.

Now our element is correctly placed but we have a few gaps to fill. I will use a "big" box-shadow to do that. In the figure, I used a green color to illustrate but you should consider it as the same color as the background.

Next we need to clip the shadow to only show the left and right parts of it. To do this I will be using clip-path. I will use inset(0 -100%) which means clip the top and bottom shadow (the value 0) and show some of the left right shadow (-100%).

100% is a random value that needs to be very big. It can be for example 999px or 100vmax – any value to make sure we keep the left and right part of the shadow.

Now we'll see the final result in the sixth step. We still have some overflowing shadows but no one can see them since we are placing our element at the corner of the screen.

If you will be placing the ribbon inside another element don't forget to use overflow: hidden on the parent element and also replace fixed with absolute

Our final code will be:

.ribbon-1 {
  position: fixed;
  inset: 0 auto auto 0;
  background: #08769b;
  transform-origin: 100% 0;
  transform: translate(-29.3%) rotate(-45deg);
  box-shadow: 0 0 0 999px #08769b;
  clip-path: inset(0 -100%);
}

With only 7 declarations we have our rotated ribbon. You will note that our code is generic and doesn't depend on the text content. Whatever the content of the ribbon, it will always get placed correctly. You can even have multi-lines of text.

To place the ribbon at the top right corner, we just need to update a few values. Even better, let's have two classes to easily control the placement:

.ribbon-1 {
  position: fixed;
  background: #08769b;
  box-shadow: 0 0 0 999px #08769b;
  clip-path: inset(0 -100%);
}
.left {
  inset: 0 auto auto 0; /* top and left equal to 0 */
  transform-origin: 100% 0; /* OR top right */
  transform: translate(-29.3%) rotate(-45deg);
}
.right {
  inset: 0 0 auto auto; /* top and right equal to 0 */
  transform-origin: 0 0; /* OR top left */
  transform: translate(29.3%) rotate(45deg);
}

I think the code is self-explanatory and the changes between right and left are simple to understand.

How to Create a Folded Ribbon with CSS

Let's tackle the second type of ribbon the same way we did with the previous one using a step-by-step illustration.

Step-by-Step illustration of the Folded Ribbon

First, we'll start by placing our element at the right side of the parent element.

.ribbon-2 {
  --t: 10px; /* the top offset */

  position: absolute;
  inset: var(--t) 0 auto auto;
  padding:0 10px;
  background: #BD1550;

}

I will consider a variable to control the offset from the top which means that we can easily control the position of the Ribbon by adjusting that variable. Since we are using position: absolute, we should not forget to add position: relative to the parent element of the Ribbon.

I will also add some padding on the left and right sides. There is no particular logic behind the 10px – you can choose the value you want.

Now I will introduce another variable that will control the folded part. I will be using this variable to define an inset shadow box-shadow: 0 calc(-1*var(--f)) 0 #0005.

As you can see in the figure above, this shadow will add a semi-transparent black overlay on the bottom having a height equal to the variable --f. I will also increase the bottom padding to contain that shadow padding: 0 10px var(--f).

Next, using the same variable --f I will move the ribbon a bit to the right by replacing right:0 with right: calc(-1*var(--f)).

The code so far looks like this:

.ribbon-2 {
  --t: 10px; /* the top offset */
  --f :10px /* control the folded part */

  position: absolute;
  inset: var(--t) calc(-1*var(--f)) auto auto; /* the right value is here*/
  padding:0 10px var(--f);
  background: #BD1550;
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005; 
}

The code may look strange (and the result as well) but everything will make sense in the next step when we create the final shape.

In the fourth step (the last one), we will introduce clip-path to cut our element. I will also add another variable --r to control the arrow shape of the ribbon.

Before adding the clip-path, I will first increase the left padding to have the necessary space for the arrow shape:

padding: 0 10px var(--f) calc(10px + var(--r));

• The top padding is equal to 0.

• The right padding is equal to 10px (a random value)

• The bottom padding is defined by --f

• The left padding is equal to 10px (same as right) plus a value defined by the new variable --r

Now let's add the clip-path. Here is an illustration to understand the path that will lead us to the final shape.

Illustration of the clip-path

The path is defined using 7 points. Starting for point (1) and following the arrow we have the following code:

clip-path: polygon(
  0 0,  /* (1) */
  100% 0, /* (2) */
  100% calc(100% - var(--f)), /* (3) */
  calc(100% - var(--f)) 100%, /* (4) */
  calc(100% - var(--f)) calc(100% - var(--f)), /* (5) */
  0 calc(100% - var(--f)), /* (6) */
  var(--r) calc(50% - var(--f)/2) /* (7) */
)

Don't worry if you are not familiar with clip-path – this may look a bit strange to you. You don't need to manipulate that path. All you need to update the CSS variables to control the overall shape.

This said it's good to play with that path by changing some values in order to better understand how it works.

We are done. Our final code is:

.ribbon-2 {
  --f: 10px; /* control the folded part*/
  --r: 15px; /* control the ribbon shape */
  --t: 10px; /* the top offset */

  position: absolute;
  inset: var(--t) calc(-1*var(--f)) auto auto;
  padding: 0 10px var(--f) calc(10px + var(--r));
  clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
  background: #BD1550;
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}

You can adjust the values of the variables to get different results:

Like we did with the rotated ribbon, we can update a few values to change the position of this one from right to left – but this time I will not give you the code. I will let you try to find it alone 😉

It's a good exercise to figure out which value you have to update especially for the clip-path. You can always reach out to me if you have any questions.

Wrapping Up

Now you know how to create beautiful ribbons for your websites using just CSS.

If you want more, check my online collection of Ribbon Shapes where you will find different variations similar to what we did in this article.

You can use this loader component in a lot of places, and it should be as simple as possible.

In this post, we will see how to build two types of loaders with only one <div> and a few lines of CSS code. Not only this but we will make them customizable so you can easily create different variations from the same code.

Here's what we'll build:

CSS-only Spinner and Progress Loader

How to Create a Spinner Loader

Below is a demo of what we are building:

 .loader {
   --b: 10px;  / border thickness /
   --n: 10;    / number of dashes/
   --g: 10deg; / gap between dashes/
   --c: red;   / the color /

   width: 100px; / size /
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000,var(--c)) content-box;
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
           mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
           mask-composite: intersect;
   animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {to{transform: rotate(1turn)}}

We have 4 different loaders using the same code. By only changing a few variables, we can generate a new loader without needing to touch the CSS code.

The variables are defined like below:

• --b defines the border thickness.

• --n defines the number of dashes.

• --g defines the gap between dashes. Since we're dealing with a circular element, this one is an angle value.

• --c defines the color.

Here is an illustration to see the different variables.

CSS Variables of the Spinner loader

Let's tackle the CSS code. We will use another figure to illustrate a step-by-step construction of the loader.

Step-by-Step illustration of the Spinner Loader

We first start by creating a circle like this:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
}

Nothing complex so far. Note the use of aspect-ratio which allows us to only modify one value (the width) in order to control the size.

Then we add a conic gradient coloration from transparent to the defined color (the variable --c):

.loader {
  width:100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
}

In this step, we introduce the mask property to hide some parts of the circle in a repetitive manner. This will depend on the --n and --d variables. If you look closely at the figure, we will notice the following pattern:

visible part
invisible part
visible part
invisible part
etc

To do this, we use repeating-conic-gradient(#000 0 X, #0000 0 Y). From 0 to X we have an opaque color (visible part) and from X to Y we have a transparent one (invisible part).

We introduce our variables:

• We need a gap equal to g between each visible part so the formula between X and Y will be X = Y - g.

• We need n visible part so the formula of Y should be Y = 360deg/n. A full circle is 360deg so we simply divide it by n

Our code so far is:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}

This next step is the trickiest one, because we need to apply another mask to create a kind of hole in order to get the final shape. To do this we will logically use a radial-gradient() with our variable b:

radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0)

A full circle from where we remove a thickness equal to b.

We add this to the previous mask:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: 
   radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
   repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}

We have two mask layers, but the result is not what we want. We get the following:

It may look strange but it's logical. The "final" visible part is nothing but the sum of each visible part of each mask layer. We can change this behavior using mask-composite. I would need a whole article to explain this property so I will simply give the value.

In our case, we need to consider intersect (and destination-out for the prefixed property). Our code will become:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: 
    radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
    repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
}

We are done with the shape! We are only missing the animation. The latter is an infinite rotation.

The only thing to note is that I am using a steps animation to create the illusion of fixed dashes and moving colors.

Here is an illustration to see the difference

A Linear Animation vs a Steps Animation

The first one is a linear and continuous rotation of the shape (not what we want) and the second one is a discrete animation (the one we want).

Here is the full code including the animation:

 .loader {
   --b: 10px;  / border thickness /
   --n: 10;    / number of dashes/
   --g: 10deg; / gap between dashes/
   --c: red;   / the color /

   width: 100px; / size /
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000,var(--c)) content-box;
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
           mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
           mask-composite: intersect;
   animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {to{transform: rotate(1turn)}}

You will notice a few differences with the code I used in the explanation:

• I am adding padding: 1px and setting the background to content-box

• There is +/1deg between the colors of the repeating-conic-gradient()

• There are a few percentages of difference between the color inside the radial-gradient()

Those are some corrections to avoid visual glitches. Gradients are known to produce "strange" results in some cases so we have to adjust some values manually to avoid them.

How to Create a Progress Loader

Like the previous one loader, let's start with an overview:

 .loader {
   --n:5;    / control the number of stripes /
   --s:30px; / control the width of stripes /
   --g:5px;  / control the gap between stripes /

   width:calc(var(--n)(var(--s) + var(--g)) - var(--g));
   height:30px;
   padding:var(--g);
   margin:5px auto;
   border:1px solid;
   background:
     repeating-linear-gradient(90deg,
       currentColor  0 var(--s),
       #0000 0 calc(var(--s) + var(--g))
     ) left / calc((var(--n) + 1)(var(--s) + var(--g))) 100% 
     no-repeat content-box;
   animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
 }
 @keyframes load {
   0% {background-size: 0% 100%}
 }

We have the same configuration as the previous loader. CSS variables that control the loader:

• --n defines the number of dashes/stripes.

• --s defines the width of each stripe.

• --g defines the gap between stripes.

Illustration of the CSS Variables

From the above figure we can see that the width of the element will depend on the 3 variables. The CSS will be as follows:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px; /* use any value you want here */
  padding: var(--g);
  border: 1px solid;
}

We use padding to set the gap on each side. Then the width will be equal to the number of stripes multiplied by their width and the gap. We remove one gap because for N stripes we have N-1 gaps.

To create the stripes we will use the below gradient.

repeating-linear-gradient(90deg,
  currentColor 0 var(--s),
  #0000        0 calc(var(--s) + var(--g))
 )

From 0 to s is the defined color and from s to s + g a transparent color (the gap).

I am using currentColor which is the value of the color property. Note that I didn't define any color inside border so it will also use to the value of color. If we want to change the color of the loader, we only need to set the color property.

Our code so far:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px;
  padding: var(--g);
  border: 1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / 100% 100% content-box no-repeat;
}

I am using content-box to make sure the gradient doesn't cover the padding area. Then I define a size equal to 100% 100% and a left position.

It's time for the animation. For this loader, we will animate the background-size from 0% 100% to 100% 100% which means the width of our gradient from 0% to 100%

Like the previous loader, we will rely on steps() to have a discrete animation instead of a continuous one.

A Linear Animation vs a Steps Animation

The second one is what we want to create, and we can achieve it by adding the following code:

.loader {
  animation: load 1.5s steps(var(--n)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}

If you look closely at the last figure, you will notice that the animation is not complete. We are missing one stripe at the end, even if we have used N. This is not a bug but how steps() is supposed to work.

To overcome this, we need to add an extra step. We increase the background-size of our gradient to contain N+1 stripes and use steps(N+1). This will get us to the final code:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px;
  padding: var(--g);
  margin: 5px auto;
  border: 1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100% 
    content-box no-repeat;
  animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}

Note that the width of the gradient is equal to N+1 multiplied by the width of one stripe and a gap (instead of being 100% )

Conclusion

I hope you enjoyed this tutorial. If you are interested, I have made more than 500 CSS-only single div loaders. I also wrote another tutorial to explain how to create the Dots loader using only background properties.

Find below useful links to get more detail about some properties I have used that I didn't explain thoroughly due to their complexity:

• mask-composite: https://css-tricks.com/mask-compositing-the-crash-course/

• steps(): https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#the_steps_class_of_easing_functions

You will find a lot of articles around building such a component, but they typically either rely on SVG or a lot of HTML elements.

In this post, I will show you how to create a pie chart using CSS and only one element.

Below is an overview of what we are building:

 20%

 40%

 60%

 80%

 90%

@property --p{
  syntax: 


        
 
As you can see in the CodePen above, we have a static pie chart, an animated one, and we can also have rounded edges. All this with a single <div> element.
In addition to that, we can easily adjust the different values using CSS variables so we don't have to bother ourselves with changing the CSS code.
I know the code may look a bit difficult at first glance, but after reading through the explanation below you will be able to confidently make your own pie charts.
The HTML Structure for the Pie Chart
As I mentioned above, we have a single <div> where we add the percentage value (the progress of the pie chart) as the main content:
<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>

We also add the CSS variables as inline styles.

--p: This variable should contain the percentage value as a number (without the % sign). It be should the same as the content.

--b: This variable will define the thickness of the border.

--c: This variable will define the main color.


For the sake of this article and the demo, I am using a one-character variable to keep the code short. But it's better to consider more explicit variables when using the code in a production environment. Examples: --percentage, --border-thickness, and --main-color.
The CSS Setting for the Pie Chart
We first start by styling our content. This part is easy and the code is as follows:
.pie {
  --w: 150px;
  width: var(--w);
  aspect-ratio: 1;
  display: inline-grid;
  place-content: center;
  margin: 5px;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}

I am defining the element as inline-grid to easily place the content at the middle using place-content: center. We use aspect-ratio: 1 to make sure the element remains square. We can also use height: var(--w) but it's always good to learn and use a new CSS property.
You may wonder why I am using a variable to define the width instead of simply setting width: 150px. I need to know the value of the width for future usage so I am defining it as a variable.
All the remaining CSS is pretty basic to style the text. Feel free to update it as you want.
Let's move on to the interesting part – the main shape of our component. For this, we will use a pseudo element with the following styles:
.pie:before{
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
}

A pseudo-element that has position: absolute covers all the area thanks to inset: 0. Yes, it's again a new CSS property which is the shorthand for top, right, bottom, and right (which you can read more about here).
Then we make it a circle ( border-radius: 50%) and we apply a conic-gradient(). Note the use of the CSS variables we defined as inline styles ( --c for the color and --p for the percentage).
Until now, this will give us the following result:

Conic-gradient applied to pseudo-element
We are getting closer! The conic-gradient() is giving us a two-color gradient. From 0% to p% the main color and the remaining part is a transparent color (defined with the hexadecimal value #0000 ).
To keep only the border part we will use a mask to hide the middle part. We will use a radial-gradient() this time:
radial-gradient(farthest-side,red calc(99% - var(--b)),blue calc(100% - var(--b)))

The above applied as a background will give us the following:

Illustration of the radial-gradient
Note the use of the variable --b that defines the thickness of the border (shown as blue in the above).
Now imagine the red part being the invisible part and the blue part the visible one. This is what we will get if we use the same gradient with the mask property:

Applying mask to the pseudo element
We have our pie chart with one element and a few lines of CSS code.
.pie {
  --w:150px;

  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  place-content: center;
  margin: 5px;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}
.pie:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}

And the HTML:
<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>

How to add the the rounded edges
For this I will add an extra gradient layer to round the top edge and a pseudo element to round the other edge. Here is an illustration to understand the trick:

Illustration of the rounded edges
The code for (1) to round the top edge:
.pie:before {
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
}

In addition to the conic-gradient() we add a radial-gradient() placed at the top that has a size equal to the border thickness defined by --b.
The code for (2) to round the other edge:
.pie:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}

The inset property is setting the size of the pseudo-element to be equal to --b. Remember that it's the shorthand for top, right, bottom and left. If we have
left = right = 50% - b/2

this means that from each side we are moving to the center minus an offset equal to b/2 – so we end up having a width equal to 2*b/2 = b. Same logic for the height.
Now we need to correctly place our element, which is why we use the transform property. Our element is initially placed at the center so we need to first rotate it. Having the percentage we use the "Rule of three" to get the angle:
angle = percentage*360deg/100

Then we do a translation, and here we will need the width because we have to perform a translation by half the width (w/2).
Ok, ok – you might be a bit lost within all these formulas. Find below an illustration to understand the logic behind the transform property

Applying the transform property to the pseudo-element
After that, we color the pseudo-element with the main color --c and we are done. We have our pie chart with rounded edges.
How to Animate the Pie Chart
A static pie chart is good but an animated one is better! To do this we will animate the percentage value --p from 0 to the defined value. By default, we cannot animate CSS variables, but thanks to the new @property feature it's now possible.
We register the variable:
@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

We create a keyframes:
@keyframes p {
  from {--p:0}
}

Note that we only need to specify the from. Doing this, the browser will make the to equal, by default, to the value we defined (<div class="pie" style="--p:60;">60%</div>).
And finally, we call the animation. You can define the duration/delay as you want.
animation: p 1s .5s both;

Unfortunately, this technique is not widely supported. You can test it on Chromium-based browsers (Chrome and Edge) but it will fail on Firefox and Safari. You can check out Can I Use to keep track of the support.
Before we end, here again is the full code and a demo of the final working product. You can see that I am using two classes to control the rounded edges and the animation so we can easily add/remove them as needed.

  
Click to see the full code

 20%

 40%

 60%

 80%

 90%

@property --p{
  syntax: 


        

Most websites rely on JavaScript to toggle the visibility of the button based on the amount of scroll. In this post, I will show you how to create such an effect using only CSS.

We will explore two kinds of effects – a "sliding" and a "fading" effect.

How to Make a Sliding Back to Top Button

Here is an overview of what we are building in this part:

If you scroll, the "back to top" button will appear and will stick at the bottom of the page. Click on it and you will get back to the top!

You will find no JavaScript in there. We'll only use CSS to make the button appear when you scroll the page.

It's cool, right? Let's dissect the code to understand the magic behind it.

The HTML Structure

<body>
  <div>
    <!-- your content goes here  -->
  </div>
  <a href="#" class="top">...</a>
</body>

Inside the body tag, we create a div where we put the content of the website. Right after that, we add our "back to top" button as a link.

For the sake of the article, I will keep the button as simple as possible but you can use whatever you want (an image, an icon, and so on). All you need is to keep the usage of a combined with href="#".

That's it! We are done with the HTML structure.

The CSS Code

We first start by styling our button. For this part, it's up to you to be creative and build your own button. I will use a basic button (<a class="top" href="#">Back to Top ↑</a>) styled like this:

.top {
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  background: #000;
  border-radius: 100px;
}

Which will get us the following result:

Let's move to the main CSS. The effect we are aiming for uses two CSS techniques:

1. CSS Grid to create the main structure
2. position: sticky to be able to keep the button at the bottom of the screen

Our structure will be a grid of two columns – one for the content and another one for the "back to top" button. For this, we add the following code:

body {
  display: grid;
  grid-template-columns: auto auto;
}

This gives us the following result:

Yes, it looks "ugly" but don't worry. This is due to the default stretch alignment of CSS Grid. We have to disable it and place our button at the bottom using place-self: end.

Now let's introduce position: sticky by adding this code:

.top {
  position: sticky;
  bottom: 20px; 
}

Our button is fixed at the bottom right of our screen thanks to our "sticky" behavior. Now we need to control that behavior to make the button initially hidden. For this, we will use margin-top with a value equal to the screen height (100vh ).

See that? Our button appears only when we scroll the screen and then remains fixed. We are getting closer!

Let's do better by adding an offset. Our margin-top will become:

.top {
  --offset: 100px; 

  margin-top: calc(100vh + var(--offset));
}

The above means: "After 100px of scrolling, show the button". To the screen height, we add an offset (that we define using a CSS variable) to control when the button should appear.

The final touch is to make the column width of the button equal to 0 by changing grid-template-columns: auto auto into grid-template-columns: auto 0px.

Oops, the button is messed up! Since we reduced the space of the button to 0, the latter will try to fit that space by adding line breaks. To fix this, we simply add white-space: nowrap to disable the line breaks.

We made our first CSS-only "back to top" button with a sliding effect.

• You can adjust the offset to control when the button should appear
• Using bottom and margin-right you can control the distance from the bottom right corner of the screen.

Let's not forget that you can easily style the button as you want. Here is another idea using the same code structure:

How to Make a Fading Back to Top Button

Let's tackle the second type of button where we will have a "fading" effect. Here's an overview of what we will create here:

Like the previous effect, you will find zero JavaScript code. That fading effect is handled with only CSS.

Let's dig into this one!

The HTML structure

<body>
  <div>
    <!-- your content goes here  -->
  </div>
  <div class="container-top">
    <a href="#" class="top"></a>
  </div>
</body>

It's very similar to the previous example. We've simply added an extra wrapper around our "back to top" button.

The CSS code

I will skip the part where we style the button since it's the same as the previous effect.

This effect also relies on CSS grid and position: sticky. We'll also use a third technique which is the mask property (the one that will simulate the fading effect).

Let's start with the main setting:

body {
  display: grid;
  grid-template-columns: auto auto; 
}

.container-top {
  display: flex;
  align-items: flex-end;
  width: 60px;
}

.top {
  position: sticky;
  bottom: 20px;      
  margin-right: 10px; 
}

We define our two-column layout where the container-top is the second one. We make the latter a flex container and we place the button at the very bottom using align-items: flex-end. Finally, we use position: sticky to have the button fixed at the bottom right of the screen.

Now let's introduce the mask property to create the fading effect. To understand this trick, I will first use a background to illustrate how it works.

In the above, I applied the following gradient to container-top:

.container-top {
  background: linear-gradient(green 100vh, red 0);
}

If you scroll, you will notice that the button will move from the green area to the red one. The green area is equal to the screen height.

Imagine that the green area is the "invisible" part of the container-top and the red one is the "visible" part. This is what mask will be doing if we consider the same gradient.

In this last demo, we changed background with mask and we used a transparent/opaque combination of colors instead of the green/red one. The button now appears only on scroll!

To get the fading effect, we need to increase the distance between both colors. Let's introduce a CSS variable and update the mask like below:

.container-top {
  --fade: 120px;
  mask: linear-gradient(#0000 100vh, #000 calc(100vh + var(--fade)));
}

The transparent color ends at 100vh, and the opaque one start at 100vh + 120px. We have a fading of 120px between transparent and opaque which gives us the following result:

We are almost there! Our button is fading like expected. We are simply missing the offset variable to control when the fading effect should happen.

For this, we do the same as the previous effect by introducing the offset variable:

The final touch is to make the column width of container-top equal to 0 using grid-template-columns: auto 0px

.container-top {
  --offset: 100px;
  --fade: 120px;

  mask: linear-gradient(#0000 calc(100vh + var(--offset)), #000 calc(100vh + var(--offset) + var(--fade)));
}

Our second "back to top" button is done! Like the previous one, you can easily control the offset, the fading effect, and the position by adjusting the CSS variables, the bottom property, and the margin-right property.

Thank you for reading!

For more CSS tips, follow me on Twitter.