<label class="container">
  <div class="simple-text">Click me!</div>
  <input checked="checked" type="checkbox" />
  <div class="checkmark"></div>
  <div class="torch">
    <div class="head">
      <div class="face top">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="face left">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="face right">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="stick">
      <div class="side side-left">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="side side-right">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</label>

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.simple-text {
  position: absolute;
  bottom: -40px;
  width: 120px;
  text-align: center;
  color: white;
  font-size: 16pt;
  font-weight: 800;
  font-family: monospace;
}

.torch {
  display: flex;
  justify-content: center;
  height: 150px;
}

.head,
.stick {
  position: absolute;
  width: 30px;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(45deg);
}

.stick {
  position: relative;
  height: 120px;
}

.face {
  position: absolute;
  transform-style: preserve-3d;
  width: 30px;
  height: 30px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  background-color: #000000;
}

.top {
  transform: rotateX(90deg) translateZ(15px);
}

.left {
  transform: rotateY(-90deg) translateZ(15px);
}

.right {
  transform: rotateY(0deg) translateZ(15px);
}

.top div,
.left div,
.right div {
  width: 102%;
  height: 102%;
}

.top div:nth-child(1),
.left div:nth-child(3),
.right div:nth-child(3) {
  background-color: #ffff9760;
}

.top div:nth-child(2),
.left div:nth-child(1),
.right div:nth-child(1) {
  background-color: #ffd80060;
}

.top div:nth-child(3),
.left div:nth-child(4),
.right div:nth-child(4) {
  background-color: #ffffff60;
}

.top div:nth-child(4),
.left div:nth-child(2),
.right div:nth-child(2) {
  background-color: #ff8f0060;
}

.side {
  position: absolute;
  width: 30px;
  height: 120px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: repeat(8, 12.5%);
  cursor: pointer;
  translate: 0 12px;
}

.side-left {
  transform: rotateY(-90deg) translateZ(15px) translateY(8px);
}

.side-right {
  transform: rotateY(0deg) translateZ(15px) translateY(8px);
}

.side-left div,
.side-right div {
  width: 103%;
  height: 103%;
}

.side div:nth-child(1) {
  background-color: #443622;
}

.side div:nth-child(2),
.side div:nth-child(2) {
  background-color: #2e2517;
}

.side div:nth-child(3),
.side div:nth-child(5) {
  background-color: #4b3b23;
}

.side div:nth-child(4),
.side div:nth-child(10) {
  background-color: #251e12;
}

.side div:nth-child(6) {
  background-color: #292115;
}

.side div:nth-child(7) {
  background-color: #4b3c26;
}

.side div:nth-child(8) {
  background-color: #292115;
}

.side div:nth-child(9) {
  background-color: #4b3a21;
}

.side div:nth-child(11),
.side div:nth-child(15) {
  background-color: #3d311d;
}

.side div:nth-child(12) {
  background-color: #2c2315;
}

.side div:nth-child(13) {
  background-color: #493a22;
}

.side div:nth-child(14) {
  background-color: #2b2114;
}

.side div:nth-child(16) {
  background-color: #271e10;
}

.container input:checked ~ .torch .face {
  filter: drop-shadow(0px 0px 2px rgb(255, 255, 255))
    drop-shadow(0px 0px 10px rgba(255, 237, 156, 0.7))
    drop-shadow(0px 0px 25px rgba(255, 227, 101, 0.4));
}

.container input:checked ~ .torch .top div:nth-child(1),
.container input:checked ~ .torch .left div:nth-child(3),
.container input:checked ~ .torch .right div:nth-child(3) {
  background-color: #ffff97;
}

.container input:checked ~ .torch .top div:nth-child(2),
.container input:checked ~ .torch .left div:nth-child(1),
.container input:checked ~ .torch .right div:nth-child(1) {
  background-color: #ffd800;
}

.container input:checked ~ .torch .top div:nth-child(3),
.container input:checked ~ .torch .left div:nth-child(4),
.container input:checked ~ .torch .right div:nth-child(4) {
  background-color: #ffffff;
}

.container input:checked ~ .torch .top div:nth-child(4),
.container input:checked ~ .torch .left div:nth-child(2),
.container input:checked ~ .torch .right div:nth-child(2) {
  background-color: #ff8f00;
}

.container input:checked ~ .torch .side div:nth-child(1) {
  background-color: #7c623e;
}

.container input:checked ~ .torch .side div:nth-child(2),
.container input:checked ~ .torch .side div:nth-child(2) {
  background-color: #4c3d26;
}

.container input:checked ~ .torch .side div:nth-child(3),
.container input:checked ~ .torch .side div:nth-child(5) {
  background-color: #937344;
}

.container input:checked ~ .torch .side div:nth-child(4),
.container input:checked ~ .torch .side div:nth-child(10) {
  background-color: #3c2f1c;
}

.container input:checked ~ .torch .side div:nth-child(6) {
  background-color: #423522;
}

.container input:checked ~ .torch .side div:nth-child(7) {
  background-color: #9f7f50;
}

.container input:checked ~ .torch .side div:nth-child(8) {
  background-color: #403320;
}

.container input:checked ~ .torch .side div:nth-child(9) {
  background-color: #977748;
}

.container input:checked ~ .torch .side div:nth-child(11),
.container input:checked ~ .torch .side div:nth-child(15) {
  background-color: #675231;
}

.container input:checked ~ .torch .side div:nth-child(12) {
  background-color: #3d301d;
}

.container input:checked ~ .torch .side div:nth-child(13) {
  background-color: #987849;
}

.container input:checked ~ .torch .side div:nth-child(14) {
  background-color: #3b2e1b;
}

.container input:checked ~ .torch .side div:nth-child(16) {
  background-color: #372a17;
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

3D Torch Light Toggle Using HTML & CSS Only

If you’re looking to impress your users with a visually striking and interactive web element, this 3D torch light toggle built with pure HTML and CSS is a perfect example. This unique UI component simulates a three-dimensional torch that lights up when clicked — no JavaScript required.

What Is a 3D Torch Toggle?

The 3D torch toggle is a creative checkbox-based animation that mimics the visual appearance of a torch lighting up. It uses multiple <div> elements to build a cubic structure with depth, shadows, and realistic flame-inspired lighting effects — all powered by modern CSS 3D transforms and gradients.

Key Features

Fully functional toggle switch using just HTML input
Realistic torch design using CSS grids and 3D perspective
Dynamic lighting effect when toggled
Pure HTML and CSS — no JavaScript or external libraries

How It Works

1. HTML Structure

The core elements include:

A <label> container that wraps everything
A hidden <input type="checkbox"> used to track toggle state
A .torch div which contains two major parts: the head (flame) and the stick (handle)
Faces of the torch are split into multiple grid cells for detailed coloring

2. CSS Magic

Here’s what the CSS does:

Uses transform: rotateX() and rotateY() to simulate a 3D angle
The ::before and ::after pseudo-elements and child divs are colored with gradients and overlays to mimic wood and fire
When the checkbox is checked (:checked), the torch “turns on”:
- The flame becomes brighter
- Colors shift from dimmed to vibrant
- A glowing shadow (via drop-shadow) is applied to simulate a burning effect

3. Interactive Feedback

The toggle text says “Click me!” — and when clicked, the torch lights up with glowing flame colors. This makes the experience engaging and fun, even without scripting.

Why Use This Toggle Design?

This kind of interactive visual UI element is perfect for:

Games and fantasy websites
Adventure-themed landing pages
Interactive storytelling or digital art
Creative toggle switches instead of standard checkboxes

Performance & Accessibility

Despite the visual complexity, this toggle remains:

Lightweight and fast (only HTML + CSS)
Easy to implement on any website
Responsive and customizable
Screen-reader friendly, thanks to proper input usage

Use Case Example

Imagine a gaming website where each character unlocks with a torch light effect, or a fantasy-themed form where toggles are styled like magical torches. This design allows you to break away from boring UI patterns and make your website unforgettable.

Final Thoughts

The 3D Torch Toggle Effect demonstrates how powerful CSS can be when combined with a bit of imagination. By using grids, 3D transforms, shadows, and clever pseudo-classes, you can craft an interactive UI that doesn’t just function — it wows.

Whether you’re learning CSS or building something extraordinary, this effect is a fantastic addition to your toolkit.

Looking to explore more HTML and CSS-only effects like this? Follow along and discover new creative UI components every week.

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.