Overlapping Circles In Css With 1 Div

I'm looking to create this overlapping circles shape in CSS: Basically, just stacked circles. I've looked around, and all solutions I see include using multiple div elements for t

Solution 1:

With CSS box-shadows

You can use multiple box-shadows with several colours on a rounded div. They need to be seperated by a comma:

#circles {
  background-color: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 10px00 -2px#f8ff00,
              20px00 -4px#009901,
              30px00 -6px#3531ff;
}

<divid="circles"></div>

output :

Browser support for box-shadows is IE9+ (for more info see canIuse)

---

You can also make the overlapping circles shape responsive according to the width of the viewport with vw units : DEMO

#circles {
  background-color: red;
  width: 20vw;
  height: 20vw;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 2vw00 -0.4vw#f8ff00, 
              4vw00 -0.8vw#009901, 
              6vw00 -1.2vw#3531ff;
}

<divid="circles"></div>

Browser support for vw units is IE9+ (for more info see canIuse)

---

With SVG

Another approach would be to use an inline svg with the <circle> element. This is responsive according to the size of the parent and browser support goes back to IE9 like box-shadows :

svg{width:80%;}

<svgviewbox="0 0 100 30"><circlecx="59"cy="15"r="8.5"fill="darkorange" /><circlecx="56"cy="15"r="9"fill="gold" /><circlecx="53"cy="15"r="9.5"fill="tomato" /><circlecx="50"cy="15"r="10"fill="teal" /></svg>

I also expanded on the SVG version to make an animated "worm" with more overlapping circles. You can see it in this pen : animated worm

And it looks like this :

Solution 2:

It is possible to use CSS3 multiple background images and radial gradients together:

#circles {
  width: 115px;
  height: 100px;
  background-image:
    radial-gradient(circle at 50px50px, #F000, #F0050px, transparent 50px),
    radial-gradient(circle at 55px50px, #FF00, #FF050px, transparent 50px),
    radial-gradient(circle at 60px50px, #0800, #08050px, transparent 50px),
    radial-gradient(circle at 65px50px, #00F0, #00F50px, transparent 50px);
}

<divid="circles"></div>

Solution 3:

Or, if you're feeling crazy, you could make an svg and use it inline as a background image:

#circles {
  width: 120px;
  height: 100px;
  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><circle fill='blue'  cy='50' cx='70' r='50' /><circle fill='green'  cy='50' cx='65' r='50' /><circle fill='yellow'  cy='50' cx='60' r='50' /><circle fill='red'  cy='50' cx='55' r='50' /></svg>");
}

<divid="circles"></div>

Solution 4:

You can achieve this by pseudo-selectors like ::before and::after, You can find the jsfiddle https://jsfiddle.net/zakirshaik/jL78m9d1/6/.

You can add shadows to the code to increase the number of circles.

.circle-overlaping{
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
  position:relative;
}

.circle-overlaping::before{
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  background-color: yellow;
  width: 100px;
  height:100px;
  border-radius: 50%;
}

.circle-overlaping::after{
  content: '';
  position: absolute;
  top: 0;
  left: 40px;
  background-color: blue;
  width: 100px;
  height:100px;
  border-radius: 50%;
}

<divclass="circle-overlaping"></div>