8 replies

How to mask sibling divs

I am currently designing my portfolio and I've been wondering how do I achieve this design in css?
I tried making it but I don't know how to hide the overflowing of the shape.

this is my sass

html,
body {
  background: #121212;
}

.parent-div {
  position: relative;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  div {
    background: rgba($color: #000000, $alpha: 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    aspect-ratio: 1/1;
    border-radius: 15px;
    border: solid 1.5px #303030;
  }
  .shape {
    background: #ea0599;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 50%;
    width: 900px;
    top: 250px;
    filter: blur(100px);
    opacity: 0.5;
    mix-blend-mode: plus-lighter;
  }
}

html,
body {
  background: #121212;
}

.parent-div {
  position: relative;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  div {
    background: rgba($color: #000000, $alpha: 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    aspect-ratio: 1/1;
    border-radius: 15px;
    border: solid 1.5px #303030;
  }
  .shape {
    background: #ea0599;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 50%;
    width: 900px;
    top: 250px;
    filter: blur(100px);
    opacity: 0.5;
    mix-blend-mode: plus-lighter;
  }
}

this is my html

<div className='parent-div'>
        <div className=''>div1</div>
        <div className=''>div2</div>
        <div className=''>div3</div>
        <div className='shape'></div>
</div>

<div className='parent-div'>
        <div className=''>div1</div>
        <div className=''>div2</div>
        <div className=''>div3</div>
        <div className='shape'></div>
</div>

or is there another way of doing this effect?

KP-C

Kevin Powell - Community•3y ago•

8 replies

fort

How to mask sibling divs

I am currently designing my portfolio and I've been wondering how do I achieve this design in css?
I tried making it but I don't know how to hide the overflowing of the shape.

this is my sass

html,
body {
  background: #121212;
}

.parent-div {
  position: relative;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  div {
    background: rgba($color: #000000, $alpha: 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    aspect-ratio: 1/1;
    border-radius: 15px;
    border: solid 1.5px #303030;
  }
  .shape {
    background: #ea0599;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 50%;
    width: 900px;
    top: 250px;
    filter: blur(100px);
    opacity: 0.5;
    mix-blend-mode: plus-lighter;
  }
}

html,
body {
  background: #121212;
}

.parent-div {
  position: relative;
  display: flex;
  gap: 1rem;
  overflow: hidden;
  div {
    background: rgba($color: #000000, $alpha: 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    aspect-ratio: 1/1;
    border-radius: 15px;
    border: solid 1.5px #303030;
  }
  .shape {
    background: #ea0599;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 50%;
    width: 900px;
    top: 250px;
    filter: blur(100px);
    opacity: 0.5;
    mix-blend-mode: plus-lighter;
  }
}

this is my html

<div className='parent-div'>
        <div className=''>div1</div>
        <div className=''>div2</div>
        <div className=''>div3</div>
        <div className='shape'></div>
</div>

<div className='parent-div'>
        <div className=''>div1</div>
        <div className=''>div2</div>
        <div className=''>div3</div>
        <div className='shape'></div>
</div>

or is there another way of doing this effect?

How to mask sibling divs

Similar Threads

How to mask sibling divs

Similar Threads

Similar Threads

Similar Threads