How to Make a Crescent Moon with CSS

Learn two reliable ways to draw a crisp, right‑facing crescent moon using pure CSS, perfect for icons, logos, and playful UI accents.

Live Preview: Crescent Moon

Method 1: CSS Mask (Single Element)

/* Right-facing crescent moon using a single element */
.crescent {
  width: 150px;
  height: 150px;
  background: #cd5454;
  border-radius: 50%;

  /* Carve one circle from another using masks */
  -webkit-mask:
    radial-gradient(circle at 50% 50%, #000 66%, transparent 67%),
    radial-gradient(circle at 70% 50%, #000 60%, transparent 61%);
  -webkit-mask-composite: source-out; /* Chrome/Safari */
  mask:
    radial-gradient(circle at 50% 50%, #000 66%, transparent 67%),
    radial-gradient(circle at 70% 50%, #000 60%, transparent 61%);
  mask-composite: subtract; /* Firefox */
}

/* Right-facing crescent moon using a single element */
.crescent {
  width: 150px;
  height: 150px;
  background: #cd5454;
  border-radius: 50%;

  /* Carve one circle from another using masks */
  -webkit-mask:
    radial-gradient(circle at 50% 50%, #000 66%, transparent 67%),
    radial-gradient(circle at 70% 50%, #000 60%, transparent 61%);
  -webkit-mask-composite: source-out; /* Chrome/Safari */
  mask:
    radial-gradient(circle at 50% 50%, #000 66%, transparent 67%),
    radial-gradient(circle at 70% 50%, #000 60%, transparent 61%);
  mask-composite: subtract; /* Firefox */
}

Method 2: Two Overlapping Circles (Pseudo-element)

/* Parent circle is the moon color; pseudo-element "erases" part of it */
.crescent {
  width: 150px;
  height: 150px;
  background: #cd5454;     /* moon color */
  border-radius: 50%;
  position: relative;
  overflow: hidden;         /* keeps it tidy */
}

/* Make sure this matches the page background color */
.crescent::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: #fff;         /* set to your page background */
  border-radius: 50%;
  top: 50%;
  right: -10px;             /* shift right to form a right-facing crescent */
  transform: translateY(-50%);
}

/* Parent circle is the moon color; pseudo-element "erases" part of it */
.crescent {
  width: 150px;
  height: 150px;
  background: #cd5454;     /* moon color */
  border-radius: 50%;
  position: relative;
  overflow: hidden;         /* keeps it tidy */
}

/* Make sure this matches the page background color */
.crescent::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: #fff;         /* set to your page background */
  border-radius: 50%;
  top: 50%;
  right: -10px;             /* shift right to form a right-facing crescent */
  transform: translateY(-50%);
}

How This Works

In Method 1, we draw a full circle and subtract a slightly smaller, offset circle using CSS masks. The big circle supplies the moon color, while mask-composite/source-out removes the overlapping area, leaving a smooth crescent.

In Method 2, we stack two circles: the main colored circle and a pseudo-element that matches the page background. By offsetting the smaller “eraser” circle to the right, the visible portion becomes a right-facing crescent.

How to Center Content Inside a Crescent Moon

The simplest way is to turn the crescent container into a layout box. Use Flexbox or Grid to center text/icons within the element’s bounding box.

Method 1: Use CSS Flexbox

.crescent {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Place your content inside the .crescent element */

.crescent {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Place your content inside the .crescent element */

Method 2: Use CSS Grid

.crescent {
  display: grid;
  place-items: center;
}
/* Place your content inside the .crescent element */

.crescent {
  display: grid;
  place-items: center;
}
/* Place your content inside the .crescent element */

When to Use Each Shape Method

Use the CSS Mask method when you need a single, self-contained element that works on any background and scales cleanly. Use the overlapping circles method if you prefer broad compatibility without masks, but ensure the “eraser” color matches the page background; otherwise, seams may show on non-solid backgrounds.

Quick Customizations

Change the moon color by updating background: #cd5454;. Adjust thickness or orientation by tweaking mask radii and the offset (e.g., move the second radial-gradient’s center from 70% 50% left or right), or, in the pseudo-element method, by changing its size and right offset. Add a soft glow with filter: drop-shadow(0 0 8px rgba(205,84,84,.5)).

Accessibility & SEO

If decorative, add aria-hidden=”true”; if meaningful, provide a text alternative (e.g., role=”img” and aria-label=”Crescent moon icon”).