.switch {
  display: block;
  background-color: black;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

.switch input {
  display: none;
}

.switch input:checked + .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}

.switch input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.switch input:checked + .button .shine {
  opacity: 1;
}

.switch input:checked + .button .shadow {
  opacity: 0;
}

.switch .button {
  display: block;
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}

.switch .button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}

.switch .button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}

.switch .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}

.switch .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
}

.switch .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}

.switch .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}

.switch .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

80% {
    opacity: 0.8;
  }

100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }

80% {
    opacity: 0;
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

3D Sci-Fi Toggle Switch with Flickering Light Using HTML and CSS

If you’re looking to add a visually immersive and interactive UI switch to your website, this futuristic toggle design will blow your mind. Built entirely with HTML and CSS, this component combines 3D perspective, lighting effects, and animated states to simulate a sci-fi control panel — perfect for creative dashboards, games, or tech-themed websites.

What Is This 3D Toggle Switch?

This switch resembles a mechanical sci-fi control panel button, complete with:

3D rotation on toggle
A glowing red light with flicker animation
Shine and shadow effects for depth
Subtle dot matrix background and digital “characters” for added realism

All of this is built without JavaScript, using just semantic HTML and advanced CSS techniques.

How It Works

1. The Structure

The component consists of:

A <label class="switch"> wrapper for styling
An <input type="checkbox"> to control state
A .button div housing multiple layers:
- .light
- .dots
- .characters
- .shine
- .shadow

This layered setup allows CSS to manipulate individual effects independently.

2. Default and Toggled States

When unchecked, the button lies flat with shadows and a “powered off” appearance.
When checked, it rotates forward in 3D with enhanced lighting and shadow effects.
The red glow appears with a flickering animation, simulating electricity or energy pulsing through.

3. 3D Transformations

Using transform: rotateX() and perspective, the component simulates depth and movement when toggled.

4. Realistic Light and Shadow Effects

The .light uses radial gradients to simulate glow.
The .shadow and .shine layers change opacity and gradient based on the switch state.

5. Details for Texture

The .dots background mimics a tech surface
The .characters element overlays symbolic UI markings, enhancing the science-fiction theme.

Key Features

Pure HTML & CSS (no JavaScript)
Flickering animation using @keyframes
Fully responsive with 3D interaction
Easy to customize (color, size, glow style)
Adds cinematic feel to UIs

Where to Use This Sci-Fi Switch

This effect fits beautifully in:

Gaming dashboards or control panels
Landing pages for software, AI tools, or futuristic tech
Dark-themed creative portfolios
Sci-fi, cyberpunk, or dystopian UI designs

Want to Learn More?

You can create and experiment with such effects easily using platforms like freeofcosts.com, where you can:

Learn HTML & CSS without coding experience
Modify visual effects in real time
Build creative buttons and toggles like this one

Final Words

This 3D toggle switch isn’t just functional—it’s immersive. By layering effects and using simple animations, you can transform basic checkboxes into engaging experiences.

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.