How to Create a Stop Watch using HTML, CSS and JavaScript


Inserting HTML

Step 1: Create a gradient background in HTML using <div>. Inside the background div, create an element for stopwatch which would contain the timer.

Step 2: The stopwatch element would contain 3 span elements for minutes, seconds and milliseconds, separated by a colon span element (:)

Step 3: Create 3 Action Buttons, Start, Stop and Reset using a tag, inside a div with class of ‘buttons’


Inserting CSS: Add the following CSS

    margin: 0;
    padding: 0;
    box-sizing: border-box;
.background {
    background: linear-gradient(to right bottom, rgba(1, 11, 71, 1), rgba(60, 4, 4, 1));
    height: 100vh;
    color: #fff;
    display: grid;
    place-content: center;
    font-size: 60px;
    font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    margin: 0 auto;
.buttons {
    text-align: center;
    margin: 0 auto;
.btn:link {
    text-decoration: none;
    font-size: 20px;
    padding: .75rem 3rem;
    border-radius: 5px;
.start {
    background-color: green;
    color: white;
.stop {
    background-color: red;
    color: black;
.reset {
    background: #fff;
    color: black;






You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *