CODEWITHSUNDEEP
htmlcsssass
noclist
noclist

Reputation: 1819

overlapping colors with HTML/CSS

I'm trying to recreate the letterboxd logo with HTML and CSS. I'm having trouble achieving the overlapping circles effect where the colors blend together to become darker at the intersections of the circles. Is there a way I can manipulate the z-index and/or opacity to acheive this effect? Thank you.

HTML:

<div class="circles">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

SCSS:

.circles {
    display: flex;

    .circle {
        height: 30px;
        width: 30px;
        border-radius: 50%;

        &:first-child {
            background: #FF8000;
        }

        &:nth-child(2) {
            background: #05E156;
            transform: translateX(-5px);
            z-index: 2;
        }

        &:nth-child(3) {
            background: #40BCF4;
            transform: translateX(-10px);
        }
    }
}

Codepen

Desired effect:

Text

Upvotes: 2

Views: 2108

Answers (4)

yaya
yaya

Reputation: 8253

The other answers mentioned using opacity for 3 circles, But i think only the middle circle is semi transparent and it's on top of the two others.

Upvotes: 1

Dan Knights
Dan Knights

Reputation: 8378

One option is to use mix-blend-mode. It's not quite what you're after and the support isn't 100%, but I think it's the best you can do with just CSS.

.circles {
  display: flex;
}

.circle {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #99AEBA;
}

.circle:first-child {
  background: #FF8000;
}

.circle:nth-child(2) {
  background: #05E156;
  transform: translateX(-5px);
  z-index: 2;
  mix-blend-mode: multiply;
}

.circle:nth-child(3) {
  background: #40BCF4;
  transform: translateX(-10px);
}
<div class="circles">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

If you want it exactly as your picture, I'd suggest using SVG instead. Check out Vectr if you're interested. It's free and really easy to use.

Upvotes: 4

Deeksha Gupta
Deeksha Gupta

Reputation: 317

You need to add z-index the way you are stacking div and add opacity with background-color.

 .circles {
  display: flex;
}
.circles .circle {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #99aeba;
}
.circles .circle:first-child {
  background-color: rgba(225, 128, 0, 0.5);
  z-index: 1;
}
.circles .circle:nth-child(2) {
  background-color: rgba(5, 255, 86, 0.5);
  transform: translateX(-7px);
  z-index: 2;
}
.circles .circle:nth-child(3) {
  background-color: rgba(64, 188, 244, 0.5);
  transform: translateX(-15px);
  z-index: 3;
}
<div class="circles">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

Upvotes: 1

Sergio Gabriel Fruto
Sergio Gabriel Fruto

Reputation: 331

You can just add opacity to the .circle class, for example:

.circle {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    opacity: 0.7;
}

You probably gonna need to play around with the z-index to tell each in what order to stack to achieve the desired effect.

https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Upvotes: 1

Related Questions