CSS Flip Switch Generator

If you have ever wanted to create a CSS flip switch or toggle switch with ease, then this generator is for you. With this generator you will be able to change properties and visiually see the changes of the flip switch, once you have made the perfect switch, scroll to the bottom of the page for the CSS and HTML source code to use in your projects.

Flip Switch Preview

Active Properties

Background Color

Text Color

Text

Inactive Properties

Background Color

Text Color

Text

Label Properties

Font Size: 18px

Text Padding: 12px

Switch Properties

Background Color

Border Color

Border Width: 2px

Switch Size: 31px

Switch Size

Width: 86px

Height: 24px

Border Radius: 50px

HTML Code

<div class="flipswitch">
    <input type="checkbox" name="flipswitch" class="flipswitch-cb" id="fs" checked>
    <label class="flipswitch-label" for="fs">
        <div class="flipswitch-inner"></div>
        <div class="flipswitch-switch"></div>
    </label>
</div>

CSS Code