Let’s design a light mode iOS Toggle Switch



Published
✅ For the “ON” button
Draw the background shape - Width 51 px, height 31 px, color #61AF56, am corner radius 15,5 px.
Draw a circle inside the first shape - width and height 27 px, color pure white. Add a shadow to the circle, color pure black, at 15% opacity, the x-axis 0, y-axis 8, set the blur at 10, and position the circle on the right side of the shape.


✅ And now, for the “OFF” button
Draw again a background shape, same width, same height, same corner radius as the first one, but color #C1C1C1
And for the circle, make a duplicate of the first one and position it to the left.

And Voila!
Here’s your iOS Toggle Switch.

Category
Web design
Be the first to comment