.container {
  display: flex;
  align-items: center;
  justify-content: center;
  --hue: 220deg;
  --width: 15rem;
  --accent-hue: 22deg;
  --duration: 0.6s;
  --easing: cubic-bezier(1, 0, 1, 1);
}

.togglesw {
  display: none;
}

.switch {
  --shadow-offset: calc(var(--width) / 20);
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: var(--width);
  height: calc(var(--width) / 2.5);
  border-radius: var(--width);
  box-shadow: inset 10px 10px 10px hsl(var(--hue) 20% 80%),
    inset -10px -10px 10px hsl(var(--hue) 20% 93%);
}

.indicator {
  content: '';
  position: absolute;
  width: 40%;
  height: 60%;
  transition: all var(--duration) var(--easing);
  box-shadow: inset 0 0 2px hsl(var(--hue) 20% 15% / 60%),
    inset 0 0 3px 2px hsl(var(--hue) 20% 15% / 60%),
    inset 0 0 5px 2px hsl(var(--hue) 20% 45% / 60%);
}

.indicator.left {
  --hue: var(--accent-hue);
  overflow: hidden;
  left: 10%;
  border-radius: 100px 0 0 100px;
  background: linear-gradient(180deg, hsl(calc(var(--accent-hue) + 20deg) 95% 80%) 10%, hsl(calc(var(--accent-hue) + 20deg) 100% 60%) 30%, hsl(var(--accent-hue) 90% 50%) 60%, hsl(var(--accent-hue) 90% 60%) 75%, hsl(var(--accent-hue) 90% 50%));
}

.indicator.left::after {
  content: '';
  position: absolute;
  opacity: 0.6;
  width: 100%;
  height: 100%;
}

.indicator.right {
  right: 10%;
  border-radius: 0 100px 100px 0;
  background-image: linear-gradient(180deg, hsl(var(--hue) 20% 95%), hsl(var(--hue) 20% 65%) 60%, hsl(var(--hue) 20% 70%) 70%, hsl(var(--hue) 20% 65%));
}

.button {
  position: absolute;
  z-index: 1;
  width: 55%;
  height: 80%;
  left: 5%;
  border-radius: 100px;
  background-image: linear-gradient(160deg, hsl(var(--hue) 20% 95%) 40%, hsl(var(--hue) 20% 65%) 70%);
  transition: all var(--duration) var(--easing);
  box-shadow: 2px 2px 3px hsl(var(--hue) 18% 50% / 80%),
    2px 2px 6px hsl(var(--hue) 18% 50% / 40%),
    10px 20px 10px hsl(var(--hue) 18% 50% / 40%),
    20px 30px 30px hsl(var(--hue) 18% 50% / 60%);
}

.button::before, 
.button::after {
  content: '';
  position: absolute;
  top: 10%;
  width: 41%;
  height: 80%;
  border-radius: 100%;
}

.button::before {
  left: 5%;
  box-shadow: inset 1px 1px 2px hsl(var(--hue) 20% 85%);
  background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 85%) 80%);
}

.button::after {
  right: 5%;
  box-shadow: inset 1px 1px 3px hsl(var(--hue) 20% 70%);
  background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 75%) 80%);
}

.togglesw:checked ~ .button {
  left: 40%;
}

.togglesw:not(:checked) ~ .indicator.left,
.togglesw:checked ~ .indicator.right {
  box-shadow: inset 0 0 5px hsl(var(--hue) 20% 15% / 100%),
    inset 20px 20px 10px hsl(var(--hue) 20% 15% / 100%),
    inset 20px 20px 15px hsl(var(--hue) 20% 45% / 100%);
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Neumorphic Toggle Switch with HTML & CSS | Stylish Light & Dark Mode Switch

If you’re looking to add a clean, modern toggle switch to your website interface, this tutorial is for you. In this post, you’ll learn how to create a neumorphic-style toggle switch using only HTML and CSS—with no JavaScript required.

This switch design blends subtle shadows, gradients, and smooth transitions, making it perfect for modern UIs like dark/light mode toggles or setting switches.

What Is a Toggle Switch?

A toggle switch is a user interface element that allows users to switch between two states, typically on and off. It’s commonly used for preferences, settings, and features such as:

Dark mode toggling
Notifications on/off
Privacy options
Control panels

In this case, the switch uses a visual padlock-style button that slides from one side to the other when toggled.

How This Toggle Works

This toggle switch is made up of three core elements:

Hidden Checkbox Input
The checkbox acts as the actual interactive input. It’s hidden from the UI and used to detect the on/off state.
Visual Indicators
There are two indicators (left and right) that change style depending on whether the switch is on or off. These indicators include smooth gradients and shadows, making them look sleek and three-dimensional.
Sliding Button
The main switch button slides between the two sides when toggled. It includes highlights, inner shadows, and gradient layers to enhance depth and create a neumorphism effect.

Key Features

✦ Pure CSS, No JavaScript

This toggle switch is built using just HTML and CSS, keeping your project lightweight and fast.

✦ Neumorphic Design

The style follows the neumorphism trend, giving the switch a soft, embossed appearance. It uses:

Inset shadows
Gradient backgrounds
Rounded corners

This gives it a tactile and modern appearance that looks great on all screen sizes.

✦ CSS Variables

Custom properties like --hue, --width, and --duration make it easy to adjust:

Color themes
Size
Animation speed

These variables make the switch reusable and easy to maintain in your projects.

✦ Smooth Transitions

The transition effects use a cubic-bezier curve (cubic-bezier(1, 0, 1, 1)) to create a smooth snapping animation that mimics real-world switch mechanics.

How to Use This Toggle in Your Project

You can use this toggle switch for many purposes:

As a light/dark mode toggle
As a settings switch for user preferences
As a feature activation toggle (e.g., enable comments, enable sound)

Simply include the provided HTML and CSS code in your project, and customize the colors or dimensions using the CSS variables.

Why This Toggle Is Great for UI/UX

This component enhances user experience by providing:

Clear visual feedback
Smooth motion that feels intuitive
Modern styling that matches today’s design trends

Whether you’re building a personal portfolio or a professional web app, this toggle will fit right in and elevate your interface.

Conclusion

This neumorphic toggle switch made with HTML and CSS is both beautiful and functional. With easy customization, smooth animation, and no JavaScript required, it’s a perfect fit for any modern web interface. Add it to your next project and provide your users with an engaging and stylish experience.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.