Learn how to draw a classic Yin Yang symbol using pure CSS. Below you’ll find a live preview and two different, copy‑paste methods you can use in any project.
Live Preview: Yin Yang Symbol
Method 1: Multiple Background Gradients (Single Element)
/* Yin Yang with layered gradients (one element) */
.yin-yang {
width: 140px;
aspect-ratio: 1 / 1;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
background:
/* small dots */
radial-gradient(circle at 50% 25%, #ffffff 12%, transparent 13%),
radial-gradient(circle at 50% 75%, #cd5454 12%, transparent 13%),
/* large circles carving the S-curve (opposite of base halves) */
radial-gradient(circle at 50% 25%, #ffffff 25%, transparent 26%),
radial-gradient(circle at 50% 75%, #cd5454 25%, transparent 26%),
/* base split */
linear-gradient(to bottom, #cd5454 50%, #ffffff 50%);
}Method 2: Pseudo-elements (More Control)
/* Yin Yang using ::before and ::after for the swirl + dots */
.yin-yang {
width: 140px;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: linear-gradient(to bottom, #cd5454 50%, #ffffff 50%);
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Top large circle (white) + top red dot */
.yin-yang::before,
.yin-yang::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 50%;
border-radius: 50%;
}
.yin-yang::before {
top: 0;
background:
radial-gradient(circle closest-side at 50% 50%, #cd5454 24%, transparent 25%),
#ffffff;
}
/* Bottom large circle (red) + bottom white dot */
.yin-yang::after {
bottom: 0;
background:
radial-gradient(circle closest-side at 50% 50%, #ffffff 24%, transparent 25%),
#cd5454;
}How This Works
The symbol is built from stacked backgrounds. A linear-gradient splits the circle into two halves (#cd5454 on top and white on bottom). Two large radial-gradients centered at 25% and 75% height, each with a 25% radius, carve the S‑curve by using the opposite color of the base halves (top large circle is white, bottom large circle is red). Two smaller radial-gradients add the contrasting dots.
Precision note: radial-gradient’s default sizing is farthest-corner, so percentage color stops aren’t an exact fraction of the element’s diameter. For accurate dot sizing in Method 2, the pseudo-elements use “closest-side,” e.g. radial-gradient(circle closest-side at 50% 50%, var(–color) 24%, transparent 25%). Because each pseudo-element is 50% of the parent, 24% there equals 12% of the full symbol’s diameter.
How to Center Content Inside a Yin Yang Symbol
The easiest way is to turn the shape into a Flexbox or Grid container and center children.
Method 1: Use CSS Flexbox
.yin-yang {
display: flex;
justify-content: center;
align-items: center;
}
/* Place text or an icon inside the element and it will be perfectly centered */Method 2: Use CSS Grid
.yin-yang {
display: grid;
place-items: center;
}
/* Any single child will be centered both horizontally and vertically */When to Use Each Shape Method
Use the multiple background gradients method for a lightweight, single-element solution that’s easy to copy and doesn’t require extra DOM or pseudo-elements. Choose the pseudo-element method when you want more control over animation, layering, or responsiveness of individual parts (like animating the dots or the swirl independently).
Quick Customizations
Change the primary color by replacing #cd5454 with any brand color. To add an outline that follows the circle, use border: 2px solid currentColor; or create a ring with box-shadow: 0 0 0 2px currentColor;. Scale the symbol by adjusting width (and using aspect-ratio: 1) to keep it perfectly circular.
Accessibility & SEO
If the symbol is decorative, add aria-hidden=”true”; if it conveys meaning, give the container role=”img” and an aria-label like “Yin Yang symbol” to improve accessibility. Note: ARIA labels help screen reader users but don’t affect SEO ranking or indexing. For SEO, include accompanying descriptive text in the page content or use an actual <img> with alt text.