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; } }
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?
7 Replies
Jochem
Jochem17mo ago
I'd make three backgrounds inside the divs, and offset them appropriately. I don't think you can achieve what you want otherwise
fort
fort17mo ago
yah that is the resort i could think of. But I thought maybe there are better ways of doing that like this post. I hope someone could find a better solution
Chris Bolson
Chris Bolson17mo ago
If I understand what you want correctly I think that you could set the boxes as clip-path masks and place the background as a pseudo element. https://codepen.io/cbolson/pen/MWzpoRL Is this something like what you are after?
fort
fort17mo ago
OMG Thank you! I knew anything is possible in css I just couldn't figure this out. Thank you man! EDIT: There is some overlapping of the shape in between the cards. But it'll work.
fort
fort17mo ago
Chris Bolson
Chris Bolson17mo ago
Sorry, missed that. Try adding round 15px to the clip path. inset(0 round 15px)
fort
fort17mo ago
Worked! Thanks again🙏
Want results from more Discord servers?
Add your server