diff --git a/style.css b/style.css
index c9c7991e3..86e90baff 100644
--- a/style.css
+++ b/style.css
@@ -16,7 +16,6 @@ th {
 }
 .progress-bar {
   display: inline-block;
-  background-color: #4caf50;
   color: white;
   height: 20px;
   line-height: 20px;
diff --git a/template.html.jinja b/template.html.jinja
index 1986b2853..bca6cbb9b 100644
--- a/template.html.jinja
+++ b/template.html.jinja
@@ -35,7 +35,12 @@
     {% if project.translators.link %}</a>{% endif %}
   </td>
   <td data-label="completion">
-    <div class="progress-bar" style="width: {{ project.completion }}%;">{{ "{:.2f}".format(project.completion) }}%</div>
+    <div class="progress-bar"
+         style="width: {{ project.completion }}%;{% if project.change %}background: linear-gradient(to left, lightgreen {{ project.change * 100 / project.completion }}%, #4caf50 {{ project.change * 100 / project.completion }}%);{% else %}background-color: #4caf50;{% endif %}"
+         title="{{ '{:.2f}'.format(project.completion) }}%, {{ '{:.2f}'.format(project.change) }} percentage points last month"
+    >
+        {{ "{:.2f}".format(project.completion) }}%
+    </div>
     <div class="progress-bar-outer-label">{{ "{:.2f}".format(project.completion) }}%</div>
   </td>
 </tr>