Kevin Powell - Community•3mo ago

How do I make background transparent for only specific parts

For this design, I'm trying to make the semicircles transparent. How do I approach this design? anything related to blend mode?

8 Replies

Tok124 (CSS Nerd)•3mo ago

You could do it using mask. I am unfortunately not very good using mask, so this could probably be done much better, possibly with mask-composite i guess. But i still don't really fully understand mask-composite... But here you have a working example at least https://codepen.io/tok124/pen/RwzEYOR Hopefully someone else with more experience on mask can provide you with a better code, but until then, you can use this 🙂

capt_uhu•3mo ago

honestly, i don't really understand mask-composite very well either I just throw in random values until it gives me what I want, just like with background-blend-mode but here's what I come up with: https://codepen.io/jsnkuhn/pen/yLdGGqK?editors=1100

mask:
  linear-gradient(red,red),
  radial-gradient(circle, red 71%, #0000 0) -5px 80% / 10px 10px no-repeat,
  radial-gradient(circle, red 71%, #0000 0) calc(100% + 5px) 80% / 10px 10px no-repeat;
mask-composite: exclude;

mask:
  linear-gradient(red,red),
  radial-gradient(circle, red 71%, #0000 0) -5px 80% / 10px 10px no-repeat,
  radial-gradient(circle, red 71%, #0000 0) calc(100% + 5px) 80% / 10px 10px no-repeat;
mask-composite: exclude;

Abdul Ahad⚡OP•3mo ago

@jsnkuhn @jsnkuhn Thanks a lot. How are you guys getting those values

capt_uhu•3mo ago

which values are you asking about?

Abdul Ahad⚡OP•3mo ago

The mask Linear gradients

capt_uhu•3mo ago

When the gradients are mostly straight forward like these I just do them by hand but I think most folks use generators. Not sure what the go to for that is these days.

Tok124 (CSS Nerd)•3mo ago

Mask is just a normal gradient. the color you use does not matter. I usually use red because it's fast to write. But i started to play around with gradients a while ago to learn how to make different logos using gradients, such as this one (image below). Then i found out about mask and realized i could use it with gradients. And i already had a rather good experience with gradients. But the easiest way to find the value is probably by using the devtools and you can increase/decrease the value by highlighting it and press up and down arrow keys on keybaord. That's and easy way to do it. So if you do for example mask:radial-gradient(circle at 50% 50%, transparent 71%, red 0) -5px 80% / 10px 10px no-repeat; you can highlight the 80% value in devtools and hold down up/down arrow key until you are satisfied

Tok124 (CSS Nerd)•3mo ago

The way i did this apex legends logo was that i had the actual logo in the background first. Then i was playing around with gradients with a low opacity so i could see that everything lined up perfectly. So then i used the devtools a lot to make sure all is perfect And when i was done i just removed the image and keeped just my own gradient logo

Gaming

Programming

How do I make background transparent for only specific parts