Continuing with our series on creating shapes with CSS, this blog post will take you through different approaches to create a Circle using CSS!

1. Border Radius: The Classic Approach #

The most common and easiest way to create a circle is by using the border-radius property. By having equal width and height, and setting the border-radius to 50%, we get a circle.

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* radius is 50% of the element's width */
  background-color: #007BFF;
}

A slight improved version of above code is to use aspect-ratio to auto-determine the height of the element instead of duplicating the size.

.circle {
  width: 150px;
  aspect-ratio: 1; /* means width and height are equal */
  border-radius: 50%;
  background-color: #007BFF;
}

2. Using clip-path #

The clip-path property lets you clip an element into various shapes. One of the available shapes is circle().

.circle {
  width: 100px;
  aspect-ratio: 1;
  background-color: orange;
  clip-path: circle(50%); /* Circle of 50% of element's width */
}

Since we clip a circlular shape from an element, the element itself doesn't necessarily need to be a square. We can use any shape and clip it to a circle.

.circle {
  width: 100px;
  aspect-ratio: 2 / 1; /* creates a rectangle of 100 x 50px */
  background-color: orange;
  clip-path: circle(30%); /* Radius of 30% of element's width */
}

And also position it anywhere in the element...

.circle {
  width: 100px;
  aspect-ratio: 2 / 1;
  background-color: orange;
  clip-path: circle(10px at 60px 40px);
}

3. Using radial-gradient #

Background of an element can have a radial-gradient layer, that goes from one color to another (or more). By having the outer color as transparent and having a hard stop where the inner & outer colors meet, we can create a circle.

.circle {
  width: 150px;
  aspect-ratio: 1;
  background-image: radial-gradient(circle, limegreen 50%, transparent 50%);
}

Just like clip-path method, the element's size doesn't matter and the gradient/circle can be positioned anywhere in the element. But the main advantage of this method is that an element can have multiple background-image layers and hence, multiple circles at different positions and colors!

.circle {
  width: 300px;
  aspect-ratio: 2 / 1;
  background-image: radial-gradient(circle at 50px 100px, limegreen 20px, transparent 20px),
              radial-gradient(circle at 200px 100px, orange 20px, transparent 20px);
}

4. The last one: box-shadow #

When you have a circle made with the first approach above, you can use box-shadow to create multiple replicas of that circle, by controlling the x-offset and y-offset of the shadows, like so:

.circle {
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #007BFF;
  box-shadow: 100px 20px 0 orange, 200px 50px 0 limegreen, 60px 100px 0 #FF3333;
}

Bonus: Code-golf techniques #

While the above methods are a good start, there are some crazy code-golf techniques to create a circles with lesser number of
characters. Ilya and some other players have documented many such techniques on our community forum. Check it out here.

🕹️ Here are the all the demos from the article to play with - webmaker.app/create/Iihui20xUo.

Those are the 4 different ways to create circles with CSS! Hope you enjoyed some CSS art. I'll see you in the next article of the "Shapes with CSS" series.