Creating a CSS3 lightswitch (that works!) has been interesting. I was already familiar with -moz-linear-gradient(), so creating the switch in Firefox took only a little while. But I swear the Webkit property -webkit-gradient() was made with its foremost purpose being to confuse people and complicate things more than necessary. But never mind all that – it’s done!
I tweaked the color a bit to try to imitate shadow and light a little better. The shadow also changes with the switch, depending on its position. All the coloring is completely percentage-based, so you can duplicate the same thing with any size “switch.” (Well, should be able to. Webkit is crazy. So crazy.)[CodePen height=300 show=result href=vonqb user=peiche]