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;
}
}
<div className='parent-div'>
<div className=''>div1</div>
<div className=''>div2</div>
<div className=''>div3</div>
<div className='shape'></div>
</div>
7 Replies
I'd make three backgrounds inside the divs, and offset them appropriately. I don't think you can achieve what you want otherwise
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
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?
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.
Sorry, missed that.
Try adding
round 15px to the clip path.
inset(0 round 15px)Worked! Thanks again🙏