Overlapping circles in CSS with 1 div

css circle
css circle outline
css concentric circles
circle span css
css circle div
css circle border
css dot circle
css circle with text

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 this effect. However, can't this be done with a single div, using CSS3? I looked at how it could be easily done, and figured that, if all colours are the same, you'd have a pill shape like this:

http://jsfiddle.net/5wytm0r4/

 #circles {
   background-color: red;
   width: 130px;
   height: 100px;
   border-radius: 50px;
 }
<div id="circles"></div>
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: 10px 0 0 -2px #f8ff00,
              20px 0 0 -4px #009901,
              30px 0 0 -6px #3531ff;
}
<div id="circles"></div>

html Overlapping circles in CSS with 1 div?, html Overlapping circles in CSS with 1 div? 1 div? #circles { width: 120px; height: 100px; background-image: url("data:image/svg+xml;utf8,<svg version=' 1.1'� Overlapping circles in CSS with 1 div. Tag: html,css,css3,circle,css-shapes. I'm looking to create this overlapping circles shape in CSS: Basically, just stacked

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

#circles {
  width: 115px;
  height: 100px;
  background-image:
    radial-gradient(circle at 50px 50px, #F00 0, #F00 50px, transparent 50px),
    radial-gradient(circle at 55px 50px, #FF0 0, #FF0 50px, transparent 50px),
    radial-gradient(circle at 60px 50px, #080 0, #080 50px, transparent 50px),
    radial-gradient(circle at 65px 50px, #00F 0, #00F 50px, transparent 50px);
}
<div id="circles"></div>

Four Overlapping Circles, <link href="//netdna.bootstrapcdn.com/bootstrap/2.3.1/css/bootstrap-responsive. min.css" rel="stylesheet" />. 3. . 4. <div class="row-fluid">. 5. <div class="span9" >. Overlapping circles in CSS with 1 div (3) With CSS box-shadows You can use multiple box-shadows with several colours on a rounded div. They need to be seperated by a

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>");
}
<div id="circles"></div>

CSS Circles, If you want the circle to stretch to a pill shape, set border-radius to half the Just about any technique for centering things with CSS may be used. <div class=" circle"> <svg class="circle-icon" viewBox="0 0 24 24" width="24" <path id=" circle" d=" M 50, 50 m -37, 0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0"/>� Set the CSS z-index of the outer warpper div layer to zero so that other div layers can be positioned on the top of it. Overlapping and Float Over Layers inside Outer Wrapper Div Layer Setting: In order that other div layers within the Outer Wrapper Div Layer can be floated over and overlapped with each other, the following setting is required:

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%;
}
<div class="circle-overlaping">

</div>

HTML/CSS: Z-axis Adventures, We start with three circles: each is a div filled in with “�” characters (ink blotches) , so we can Three circles overlapping in the order they were defined. #two { height: 60px; width: 60px; background-color: green; z-index: 1;} Step 2) Add CSS: To create a circle, use the border-radius property and set the value to 50%. Then combine the height and width properties with a matching value:

CSS Shapes Explained: How to Draw a Circle, Triangle, and More , CSS Shapes Explained: How to Draw a Circle, Triangle, and More Using By default, a div is always a square or a rectangle. It allows you to provide values on how much you want your wrapping text to overlap the shape. With absolute or relative positioning, you can do all sorts of overlapping. You've probably want the logo to be styled as such: div#logo { position: absolute; left: 100px; // or whatever } Note: absolute position has its eccentricities. You'll probably have to experiment a little, but it shouldn't be too hard to do what you want.

Concentric circles with CSS Quick Tips, You want to set some text inside the shape of a circle with HTML and CSS? < div class="quote-wrapper"> <blockquote class="text" height: 100%; line-height: 1.25; padding: 0; text-align: center; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3) ; } With CSS grid, overlapping grid areas, and side-by-side� Overlapping elements on a webpage can help highlight, prompt, and give priority to important content on your page. Being able to centralize a web user’s experience on a single page is just good design practice, making overlays a really valuable feature to have on your site. In this guide, we’ll go over two separate CSS […]

Using CSS to Set Text Inside a Circle, How to Stack Elements in CSS Method 1: Using the Position Property <div class="parent"> <h2>Parent</h2> <div class="child child-1"> <h2>Child 1</h2> Another nice way of overlapping elements, stacking them, so for example if you define a square, followed by a circle, the circle will be in front. I am trying to center two overlapping circles within a div but it's not working because of the style of margin-right -100. That is the style that is causing them to overlap. I have tried to set the style of margin: 0 auto on the div around it but it does not work.

Comments
  • Out of interest, why use 5000px as the border radius instead of just 50px (or 50%)?
  • @imdabestmanideedeet weren't you trying to do this jsfiddle.net/webtiki/5wytm0r4/4 ?
  • My mistake, I meant to post the URL you just posted. Thanks! I'll remove the offending comment. For other people reading this: the above JSfiddle makes all the circles of equal size instead of slightly smaller as in the answer.
  • @imdabestmanideedeet in the fiddle I posted in my previous comment, the circles are 2px wider. For same size circles, you need to do this : jsfiddle.net/webtiki/5wytm0r4/8
  • Ooh, vw units, I now have my weekend research :).
  • @TomHart they are very interesting even though with some limitations. Also Look into vh/vmin/vmax units!
  • The circles don't look smooth.
  • You need to URL encode the data, it might not work otherwise (e.g. in IE).
  • You don't have to create multiple circle tags. Simple use the use tag and transform its X-axis.
  • Great points - for readability, I havn't URL encoded the SVG in the snippet, but future readers should be aware that without URL encoding the svg it won't work in IE.
  • Great point about the use tag, thanks for teaching me something new. Surprisingly, when created with the <code>use</code> tag the SVG code is longer, but here it is anyway for future reference: <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><defs><circle cx='50' cy='50' id='circle' r='50'/></defs><use xlink:href='#circle' fill='blue' x='15' /><use xlink:href='#circle' fill='green' x='10' /><use xlink:href='#circle' fill='yellow' x='5' /><use xlink:href='#circle' fill='red' /></svg>