CSS PortalCSS Portal

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: 1px
Switch Size: 31px
Switch Size
Width: 86px
Height: 24px
Border Radius: 8px
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

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL
Sidebar

CSS & HTML References

  • Sponsors
    • Turn Website into App
    Convert your website into an app for Android and iOS. Updates automatically.     Unicode Characters & Emojis
    Search all Unicode characters and emojis plus other tools.     Learn Wordpress
    Wordpress hosting. Theme and plugin reviews. Wordpress development tips.     Templatic
    Wordpress Themes, Cloud Hosting, Backups and Webmaster Tips.     A2 Web Hosting
    Shared hosting, Reseller hosting, Cloud hosting, Dedicated hosting.     Online Password Manager
    Access your passwords from any computer, no need to remember all of your passwords.     Advertise Here
    Advertise your company and products here!