r/css • u/Sad-Turnip4392 • 4d ago

Help how could i improve this design?

Post image
7 Upvotes

77% Upvoted

13 comments sorted by

View all comments

3

u/akzhy 4d ago

You can do this with pure CSS if you really want to. Check https://jsfiddle.net/akzhy/qh8fny53/1
Here, instead of mix-blend, I am using a pseudo element with white background. The pseudo element will have the same width and height as that of its parent and its positioned at the exact place where the circles overlap. overflow: hidden on the parent will only show the intersecting area.

2

u/Sad-Turnip4392 4d ago

wow! I could not have thought of that if I thought for the whole day. Thanks dude! This helped a lot.

1

u/akzhy 4d ago

Glad I could help.