How to Create: CSS Skill Bars

Learn how to create skill bars using CSS.

My Skills

Skill bars are often used in online resumes to showcase your skills in different fields:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

Try It Yourself

How to create skill bars

Step 1 - Add HTML:

<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>
<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>
<p>PHP</p>
<div class="container">
  <div class="skills php">60%</div>
</div>

Step 2 - Add CSS:

/* Ensures padding works as expected */
* {box-sizing:border-box}
/* Container for skill bars */
.container {
  width: 100%; /* Full width */
  background-color: #ddd; /* Gray background */
}
.skills {
  text-align: right; /* Text align right */
  padding-top: 10px; /* Add top padding */
  padding-bottom: 10px; /* Add bottom padding */
  color: white; /* White text color */
}
.html {width: 90%; background-color: #04AA6D;} /* Green */
.css {width: 80%; background-color: #2196F3;} /* Blue */
.js {width: 65%; background-color: #f44336;} /* Red */
.php {width: 60%; background-color: #808080;} /* Dark gray */

Try It Yourself