AI CSS Animations

Fire and Ice Toggle

An icy track with twinkling frost turns to fire: the snowflake knob spins away into a flickering flame, the track burns orange and embers rise behind it. Ice takes the accent color.

Also known as: hot cold toggle switch, fire toggle css, snowflake flame switch.

HTML

<label class="tgl-fire-ice-toggle">
  <input type="checkbox" role="switch" aria-label="Heat">
  <span class="tgl-fire-ice-toggle-track" aria-hidden="true">
    <span class="tgl-fire-ice-toggle-frost"></span>
    <span class="tgl-fire-ice-toggle-embers"></span>
    <span class="tgl-fire-ice-toggle-knob">
      <span class="tgl-fire-ice-toggle-ice">
        <svg viewBox="0 0 24 24">
          <path d="M12 2.5v19M9.8 4.3 12 6.5l2.2-2.2M9.8 19.7 12 17.5l2.2 2.2"/>
          <path transform="rotate(60 12 12)" d="M12 2.5v19M9.8 4.3 12 6.5l2.2-2.2M9.8 19.7 12 17.5l2.2 2.2"/>
          <path transform="rotate(120 12 12)" d="M12 2.5v19M9.8 4.3 12 6.5l2.2-2.2M9.8 19.7 12 17.5l2.2 2.2"/>
        </svg>
      </span>
      <span class="tgl-fire-ice-toggle-fire">
        <svg viewBox="0 0 24 24">
          <g class="tgl-fire-ice-toggle-flame">
            <path class="tgl-fire-ice-toggle-outer" d="M12 2.5c.8 3.2 5.5 5.6 5.5 10.5a5.5 5.5 0 0 1-11 0c0-2.4 1.2-4 2.4-5.2.2 1.6.9 2.7 2 3.2C10.6 8.6 11 5.6 12 2.5z"/>
            <path class="tgl-fire-ice-toggle-inner" d="M12 11.5c.4 1.5 2.6 2.6 2.6 4.8a2.6 2.6 0 0 1-5.2 0c0-1.7 1.5-3 2.6-4.8z"/>
          </g>
        </svg>
      </span>
    </span>
  </span>
</label>

CSS

.tgl-fire-ice-toggle {
  --c: var(--tgl-color, #3b82f6);
  font-size: var(--tgl-size, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tgl-fire-ice-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.tgl-fire-ice-toggle-track {
  position: relative;
  display: block;
  width: 6em;
  height: 2.6em;
  border-radius: 1.3em;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 40%, #e0f2fe), var(--c));
  box-shadow: 0 0 0 transparent;
  transition: box-shadow 0.5s ease;
}
/* the fire layer fades in over the ice */
.tgl-fire-ice-toggle-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #fbbf24, #f97316 45%, #dc2626);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.tgl-fire-ice-toggle-frost,
.tgl-fire-ice-toggle-embers {
  position: absolute;
  transition: opacity 0.4s ease;
}
.tgl-fire-ice-toggle-frost {
  right: 0.6em;
  top: 0.45em;
  width: 2.6em;
  height: 1.7em;
}
.tgl-fire-ice-toggle-frost::before,
.tgl-fire-ice-toggle-frost::after {
  content: "";
  position: absolute;
  width: 0.45em;
  height: 0.45em;
  background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: tgl-fire-ice-toggle-twinkle 2.2s ease-in-out infinite;
}
.tgl-fire-ice-toggle-frost::before { left: 0.4em; top: 0.1em; }
.tgl-fire-ice-toggle-frost::after { left: 1.8em; top: 0.95em; animation-delay: -1.1s; }
.tgl-fire-ice-toggle-embers {
  left: 0.7em;
  bottom: 0.2em;
  width: 2.4em;
  height: 2.2em;
  opacity: 0;
}
.tgl-fire-ice-toggle-embers::before,
.tgl-fire-ice-toggle-embers::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.5em;
  width: 0.16em;
  height: 0.16em;
  border-radius: 50%;
  background: #fef08a;
  box-shadow: 0 0 0.15em #fde047;
  animation: tgl-fire-ice-toggle-rise 1.6s linear infinite;
}
.tgl-fire-ice-toggle-embers::after { left: 1.6em; animation-delay: -0.8s; }
.tgl-fire-ice-toggle-knob {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  z-index: 1;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.25);
  transition: transform 0.5s cubic-bezier(0.5, 1.3, 0.4, 1);
}
.tgl-fire-ice-toggle-ice,
.tgl-fire-ice-toggle-fire {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.tgl-fire-ice-toggle-ice svg,
.tgl-fire-ice-toggle-fire svg {
  display: block;
  width: 1.3em;
  height: 1.3em;
  overflow: visible;
}
.tgl-fire-ice-toggle-ice svg {
  fill: none;
  stroke: var(--c);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tgl-fire-ice-toggle-fire {
  opacity: 0;
  transform: scale(0.3) rotate(-90deg);
}
.tgl-fire-ice-toggle-outer { fill: #f97316; }
.tgl-fire-ice-toggle-inner { fill: #fde047; }
.tgl-fire-ice-toggle-flame {
  transform-box: fill-box;
  transform-origin: 50% 95%;
  animation: tgl-fire-ice-toggle-flicker 1.1s ease-in-out infinite;
}
.tgl-fire-ice-toggle input:checked + .tgl-fire-ice-toggle-track { box-shadow: 0 0 0.8em rgba(249, 115, 22, 0.45); }
.tgl-fire-ice-toggle input:checked + .tgl-fire-ice-toggle-track::before { opacity: 1; }
.tgl-fire-ice-toggle input:checked + .tgl-fire-ice-toggle-track .tgl-fire-ice-toggle-frost { opacity: 0; }
.tgl-fire-ice-toggle input:checked + .tgl-fire-ice-toggle-track .tgl-fire-ice-toggle-embers { opacity: 1; }
.tgl-fire-ice-toggle input:checked + .tgl-fire-ice-toggle-track .tgl-fire-ice-toggle-knob { transform: translateX(3.4em); }
.tgl-fire-ice-toggle input:checked + .tgl-fire-ice-toggle-track .tgl-fire-ice-toggle-ice {
  opacity: 0;
  transform: scale(0.3) rotate(180deg);
}
.tgl-fire-ice-toggle input:checked + .tgl-fire-ice-toggle-track .tgl-fire-ice-toggle-fire {
  opacity: 1;
  transform: none;
}
@keyframes tgl-fire-ice-toggle-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(0.4) rotate(45deg); opacity: 0.4; }
}
@keyframes tgl-fire-ice-toggle-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(0.3em, -2em); opacity: 0; }
}
@keyframes tgl-fire-ice-toggle-flicker {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  25% { transform: scale(0.94, 1.06) skewX(-3deg); }
  50% { transform: scale(1.04, 0.95) skewX(2deg); }
  75% { transform: scale(0.97, 1.04) skewX(-1deg); }
}
.tgl-fire-ice-toggle input:focus-visible + .tgl-fire-ice-toggle-track {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
  .tgl-fire-ice-toggle, .tgl-fire-ice-toggle *, .tgl-fire-ice-toggle::before, .tgl-fire-ice-toggle::after, .tgl-fire-ice-toggle *::before, .tgl-fire-ice-toggle *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --tgl-color on the element or a parent. Currently previewing #3b82f6.
  • Size: set --tgl-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 24px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar toggle switches

Yes No Toggle Switch
Gradient Toggle Switch
Liquid Stretch Toggle Switch
Spring Toggle Switch