CSS / FREE ONLINE TOOLS

CSS Switch Generator

Create a visual design with exportable code.

Files stay on your device

Primary colorSecondary color

Size / radius 24pxAngle / speed 135Checked

Result

input { appearance:none; width:64px; height:34px; border-radius:34px; background:#38c6dc; position:relative; cursor:pointer; } input:after { content:""; position:absolute; top:4px; left:4px; width:26px; height:26px; border-radius:50%; background:#b9ee58; transition:transform .2s; } input:checked:after { transform:translateX(30px); }

More css tools

CSS Loader Generator CSS Checkbox Generator CSS Clip Path Generator CSS Background Pattern Generator CSS Cubic Bezier Generator