Music Toggle

jitesh208
Jan 28, 2026 4
Live Preview

Live Editor

<div class="glass">

  <h2>Customize your experience</h2>

  <div class="toggle-card">
    <div class="toggle-row">
      <div class="info">
        <div class="icon">🎵</div>
        <div class="label">
          <small>OFF</small>
          <h3>Muted</h3>
        </div>
      </div>

      <label class="switch">
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>
  </div>

  <div class="footer">Enable Sound Effects</div>

</div>
*{
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

body{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at top left,#7a2cff,#0b0f2a 55%);
  color:#fff;
}

/* Outer glass card */
.glass{
  width:380px;
  padding:28px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  backdrop-filter:blur(18px);
  box-shadow:
    0 0 40px rgba(122,44,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.15);
  text-align:center;
}

/* Title */
.glass h2{
  font-size:22px;
  margin-bottom:22px;
  font-weight:700;
}

/* Toggle container */
.toggle-card{
  background:linear-gradient(135deg,#f4e9ff,#e6f0ff);
  border-radius:22px;
  padding:20px;
  color:#111;
  box-shadow:
    0 18px 40px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* Inner layout */
.toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Left info */
.info{
  display:flex;
  align-items:center;
  gap:14px;
}

.icon{
  font-size:34px;
}

/* Text */
.label{
  text-align:left;
}

.label small{
  font-size:12px;
  font-weight:600;
  opacity:.6;
}

.label h3{
  font-size:16px;
  margin-top:2px;
}

/* Toggle switch */
.switch{
  position:relative;
  width:82px;
  height:40px;
}

.switch input{
  display:none;
}

.slider{
  position:absolute;
  inset:0;
  background:#d4d8e6;
  border-radius:999px;
  cursor:pointer;
  transition:.35s ease;
  box-shadow:inset 0 4px 8px rgba(0,0,0,.15);
}

.slider::before{
  content:"Muted";
  position:absolute;
  height:32px;
  width:32px;
  left:4px;
  top:4px;
  background:#fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:700;
  color:#555;
  transition:.35s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}

/* Checked */
.switch input:checked + .slider{
  background:linear-gradient(135deg,#7a2cff,#00e5ff);
  box-shadow:
    0 0 14px rgba(0,229,255,.8),
    inset 0 0 0 1px rgba(255,255,255,.35);
}

.switch input:checked + .slider::before{
  transform:translateX(42px);
  content:"ON";
  color:#111;
}

/* Footer text */
.footer{
  margin-top:22px;
  font-size:16px;
  font-weight:600;
  color:#fff;
}
Categories

Music Toggle

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
