Toggle with transparency?

Hello, I am trying to create a toggle switcher, but the circle that it is having should be transparent and able to show the image behind it.

here is the image for it


I am not able to find a way to make, maybe using clip-path somehow?

Do you have any ideas?

This sounds like a job for @PaulOB :lol:

I can figure out how to do the opposite (white button with transparent background on the slider) but not that…

Here’s a quick proof of concept using box-shadow to fill outside the circle rather than using clip-path.

That was taken from another switch demo of mine so probably could be simplified a little.

Yes I’m sure you could do it with clip path also. If I get a chance I’ll try and make a demo :slight_smile:


Too awkward with clip-path but transparent radial gradients will work. However the box-shadow method above is easiest to manipulate for this demo.

1 Like

great thanks!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.