How to Make an Infinity Symbol with CSS

Create a clean, resolution‑independent infinity symbol using pure CSS. Below you’ll find a live preview and two copy‑paste methods you can use in any project.

Live Preview: Infinity Symbol

Method 1: Using Multiple Radial Gradients

/* Two donut-shaped circles overlapped to form an infinity symbol.
   Uses relative stops so thickness and radii scale with the element. */
.infinity-gradient {
  /* Ring thickness controls (percentages of each circle's radius) */
  --inner: 70%;
  --outer: 85%;

  width: 160px;
  height: 100px;

  color: #cd5454; /* loop color via currentColor */
  background:
    radial-gradient(circle closest-side at 30% 50%, transparent var(--inner), currentColor var(--inner) var(--outer), transparent var(--outer)),
    radial-gradient(circle closest-side at 70% 50%, transparent var(--inner), currentColor var(--inner) var(--outer), transparent var(--outer));

  /* Optional centering of the element itself */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Optional: a fixed-stop (px) version if you prefer exact pixels
   Note: px stops won't scale proportionally with element size */
.infinity-gradient--px {
  width: 160px;
  height: 100px;
  color: #cd5454;
  background:
    radial-gradient(circle at 30% 50%, transparent 24px, currentColor 24px 34px, transparent 34px),
    radial-gradient(circle at 70% 50%, transparent 24px, currentColor 24px 34px, transparent 34px);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Method 2: Using Borders and Pseudo-elements

/* Two bordered circles positioned side-by-side */
.infinity-borders {
  width: 180px;
  height: 90px;
  position: relative;
  color: #cd5454; /* stroke color */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* The loops */
.infinity-borders::before,
.infinity-borders::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 80px;
  height: 80px;
  box-sizing: border-box; /* include border in the specified size to prevent overflow */
  border: 12px solid currentColor; /* loop thickness */
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 0; /* keep loops behind content */
}
.infinity-borders::before { left: 0; }
.infinity-borders::after  { right: 0; }

/* Optional content wrapper so centered content sits above the loops */
.infinity-borders > .infinity-content {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 100%;
}

How This Works

In the gradient method, two radial-gradient layers create ring “donuts.” By positioning them at 30% and 70% across the element and using circle closest-side with relative stops, their strokes overlap to form the familiar infinity outline and scale with the element.

In the borders method, two absolutely positioned circles with thick borders are placed side-by-side. The borders act as the stroke, and their overlap visually creates the infinity symbol.

How to Center Content Inside an Infinity Symbol

The easiest way to center text or an icon inside the symbol’s container is to use Flexbox or Grid on the same element that draws the shape.

Method 1: Use CSS Flexbox (gradient version)

.infinity-gradient {
  /* existing infinity styles... */
  display: flex;
  justify-content: center;
  align-items: center;
}

Method 2: Use CSS Grid (gradient version)

.infinity-gradient {
  /* existing infinity styles... */
  display: grid;
  place-items: center;
}

Method 3: Keep content above the loops (borders version)

Add an inner wrapper so the content stays above the pseudo-elements:

<div class="infinity-borders">
  <span class="infinity-content">Your content</span>
</div>

When to Use Each Shape Method

Use radial gradients for a single-element, lightweight solution that’s resolution-independent and can scale proportionally when you use relative stops (as shown). Use the borders + pseudo-elements method when you want an intuitive stroke thickness (via border width) and easy control over each loop’s position with absolute positioning.

Quick Customizations

Color: Change the loop color via color: #cd5454 (for currentColor-based code) or swap #cd5454 directly in the gradients.

Stroke thickness: For gradients, adjust –inner and –outer to change the ring thickness (e.g., 72%/88% for a thinner stroke). For the borders method, change the border width; if you need proportional scaling, consider using em for the border width and adjusting font-size.

Accessibility & SEO

If the infinity shape is decorative, add aria-hidden=”true”. If it conveys meaning, give the element role=”img” and a descriptive aria-label so assistive technologies can interpret it.

<!-- Decorative -->
<div class="infinity-gradient" aria-hidden="true"></div>

<!-- Meaningful -->
<div class="infinity-gradient" role="img" aria-label="Infinity symbol"></div>