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
this is my html
or is there another way of doing this effect?
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; } }
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>
or is there another way of doing this effect?
