Build a 3D Speedometer with HTML, CSS, and JavaScript

 Are you looking for an engaging web development project? In this tutorial, we’ll learn how to create an attractive 3D speedometer using HTML, CSS, and JavaScript with Gauge.js. This interactive project is perfect for beginners and frontend developers who want to add some flair to their portfolios.

Watch the full tutorial on my YouTube channel for step-by-step instructions and live demonstrations!

---

Final Speedometer Demo

This speedometer design is fully interactive, responsive, and enhanced with a stunning 3D look to make it visually appealing.

---

Full Code: HTML, CSS, and JavaScript

Here’s the complete code for the 3D speedometer. Copy and paste it into your editor to see the results yourself!

HTML:

html

<script src="https://bernii.github.io/gauge.js/dist/gauge.min.js"></script>  
<div class="speedometer-container">  
  <canvas id="speedometer"></canvas>  
  <div class="speed-label zero">0</div>  
  <div class="speed-label max">200</div>  
  <div class="controls">  
    <button onclick="updateSpeed()">Update Speed</button>  
    <input type="number" id="speed-input" placeholder="Enter speed (0-200)" />  
  </div>  
</div>  

CSS:

css

body {  
  font-family: Arial, sans-serif;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  height: 100vh;  
  background: linear-gradient(to bottom, #1e3c72, #2a5298);  
  color: white;  
  margin: 0;  
}  

.speedometer-container {  
  position: relative;  
  text-align: center;  
}  

#speedometer {  
  width: 300px;  
  height: 150px;  
}  

.speed-label {  
  position: absolute;  
  font-size: 20px;  
  font-weight: bold;  
}  

.zero {  
  left: 40px;  
  top: 130px;  
}  

.max {  
  right: 40px;  
  top: 130px;  
}  

.controls {  
  margin-top: 20px;  
}  

button {  
  padding: 10px 20px;  
  background: #2196f3;  
  border: none;  
  color: white;  
  font-size: 16px;  
  cursor: pointer;  
  border-radius: 5px;  
}  

button:hover {  
  background: #1769aa;  
}  

input {  
  margin-left: 10px;  
  padding: 10px;  
  font-size: 16px;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
}  

JavaScript:

javascript

var options = {  
  lines: 12,  
  angle: 0.0,  
  lineWidth: 0.4,  
  pointer: {  
    length: 0.6,  
    strokeWidth: 0.04,  
    color: '#FF0000',  
  },  
  limitMax: true,  
  colorStart: '#6FADCF',  
  colorStop: '#8FC0DA',  
  strokeColor: '#E0E0E0',  
  generateGradient: true,  
};  

var target = document.getElementById('speedometer');  
var gauge = new Gauge(target).setOptions(options);  
gauge.maxValue = 200;  
gauge.set(0);  

function updateSpeed() {  
  var speed = document.getElementById('speed-input').value;  
  if (speed >= 0 && speed <= 200) {  
    gauge.set(speed);  
  } else {  
    alert('Please enter a value between 0 and 200.');  
  }  
}  

---

Watch the Full Tutorial

For a step-by-step explanation and tips on customizing this speedometer, watch my video:
👉 Create a 3D Speedometer with HTML, CSS, and JavaScript

---

Credit

Music by RSNCE_PHONK_MUSIC from Pixabay.

---

If you found this tutorial helpful, don’t forget to subscribe to my YouTube channel for more web development projects! Let me know in the comment box.