CSS3 lightswitch

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.)