Ultra Premium Animated Toggle Ui (CSS Only) by Indoram24

1 Add to Favorites

HTML Code
CSS Code

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Poppins, sans-serif;
}

body{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#020617;
}
body:has(.toggle input:checked) {
  background: #959595;
background: linear-gradient(to right, #959595 0%, #0D0D0D 46%, #010101 50%, #0A0A0A 53%, #4E4E4E 76%, #383838 87%, #1B1B1B 100%);

color: #fff !important;
}
/* hide checkbox */
.toggle input{
    display:none;
}

/* toggle wrapper */
.toggle{
    display:flex;
    align-items:center;
    gap:16px;
    color:#e5e7eb;
}

/* track */
.track{
    width:74px;
    height:38px;
    background:#1e293b;
    border-radius:50px;
    position:relative;
    cursor:pointer;
    transition:0.4s ease;
    overflow:hidden;
}

/* gradient layer */
.track::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,#22d3ee,#6366f1,#22d3ee);
    opacity:0;
    transition:0.4s;
}

/* knob */
.knob{
    position:absolute;
    top:4px;
    left:4px;
    width:30px;
    height:30px;
    background:#f8fafc;
    border-radius:50%;
    transition:0.4s cubic-bezier(.68,-0.55,.27,1.55);
    box-shadow:0 6px 15px rgba(0,0,0,0.5);
    z-index:2;
}

/* ON state */
.toggle input:checked + .track::after{
    opacity:1;
}

.toggle input:checked + .track .knob{
    transform:translateX(36px);
    background:#020617;
    box-shadow:
      0 0 10px #22d3ee,
      0 0 20px #22d3ee;
}

/* label text animation */
.label{
    font-size:1rem;
    transition:0.3s;
}

.toggle input:checked ~ .label{
    color:#22d3ee;
}

Uploaded: 3rd January 2026

Tags: #toggle, #switch, #dark

Indoram24

•Member since: 3rd January 2026

CSS Properties Used

There are 27 CSS properties used in the above example. Click to view and learn about each property.

margin padding box-sizing font-family height display align-items justify-content background input color gap width border-radius position cursor transition overflow content inset opacity top left box-shadow z-index transform font-size

HTML Tags Used

There are 9 HTML Tags used in the above example. Click to view and learn about each tag.

html head meta title body label input div span