CSS - Concentric circles

Crafting Concentric Circles with Pure CSS

Learn how to create visually appealing concentric circles using only CSS, exploring various techniques and their practical applications.

Concentric circles are a powerful design element, often used to draw attention, create visual hierarchy, or represent data. While they might seem complex, CSS provides several elegant ways to achieve this effect without relying on images or SVG. This article will guide you through different methods, from basic layering to more advanced techniques using pseudo-elements and gradients, enabling you to implement them effectively in your web projects.

Method 1: Layering Multiple div Elements

The most straightforward approach to creating concentric circles is by stacking multiple div elements, each slightly smaller than the last, and positioning them centrally. This method offers good browser compatibility and is easy to understand, making it suitable for simple implementations.

<div class="circle-container">
  <div class="circle outer"></div>
  <div class="circle middle"></div>
  <div class="circle inner"></div>
</div>

HTML structure for layered concentric circles.

.circle-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}

.circle {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.outer {
  width: 200px;
  height: 200px;
  background-color: #ff6347;
}

.middle {
  width: 140px;
  height: 140px;
  background-color: #ffd700;
}

.inner {
  width: 80px;
  height: 80px;
  background-color: #6a5acd;
}

CSS for styling and positioning layered circles.

Method 2: Utilizing Pseudo-elements for Efficiency

For a more concise and semantic approach, you can use CSS pseudo-elements (::before and ::after) to create additional circles from a single HTML element. This reduces markup clutter and keeps your HTML cleaner, which is particularly beneficial for components that appear frequently.

<div class="concentric-pseudo"></div>

Single HTML element for pseudo-element concentric circles.

.concentric-pseudo {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #20b2aa; /* Outermost circle */
  margin: 50px auto;
}

.concentric-pseudo::before,
.concentric-pseudo::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.concentric-pseudo::before {
  width: 140px;
  height: 140px;
  background-color: #87cefa; /* Middle circle */
}

.concentric-pseudo::after {
  width: 80px;
  height: 80px;
  background-color: #dda0dd; /* Innermost circle */
}

CSS using pseudo-elements for concentric circles.

graph TD
    A[HTML Element] --> B{"Pseudo-elements"}
    B --> C["::before"]
    B --> D["::after"]
    C --> E["Middle Circle"]
    D --> F["Inner Circle"]
    A --> G["Outer Circle (main element)"]

Conceptual flow of creating concentric circles using pseudo-elements.

Method 3: CSS box-shadow for Border-like Concentricity

While not creating distinct filled circles, box-shadow can be used to simulate concentric rings or borders around a central element. This is particularly useful for adding subtle visual depth or a 'halo' effect. By applying multiple box-shadow values, you can create several concentric rings.

<div class="shadow-circle"></div>

HTML for a circle with box-shadow rings.

.shadow-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #4682b4;
  margin: 50px auto;
  box-shadow:
    0 0 0 20px #b0c4de, /* First ring */
    0 0 0 40px #e0ffff, /* Second ring */
    0 0 0 60px #f0f8ff;  /* Third ring */
}

CSS using multiple box-shadow values for concentric rings.

Method 4: Using CSS radial-gradient

For a truly single-element solution that generates filled concentric circles, radial-gradient is an excellent choice. This method allows you to define multiple color stops and sizes within a single background property, creating a smooth or sharp transition between circles.

<div class="gradient-circle"></div>

HTML for a circle using radial-gradient.

.gradient-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 50px auto;
  background: radial-gradient(
    circle at center,
    #ff4500 0%, #ff4500 30%, /* Inner circle */
    #ffa500 30%, #ffa500 60%, /* Middle circle */
    #ffd700 60%, #ffd700 100%  /* Outer circle */
  );
}

CSS using radial-gradient for filled concentric circles.