diff --git a/exampleSite/content/en/shortcodes/progress.md b/exampleSite/content/en/shortcodes/progress.md
index e0009cf..7380935 100644
--- a/exampleSite/content/en/shortcodes/progress.md
+++ b/exampleSite/content/en/shortcodes/progress.md
@@ -24,5 +24,15 @@ A progress bar shows how far a process has progressed.
 <!-- prettier-ignore-start -->
 <!-- spellchecker-disable -->
 {{< progress title=Eating value=65 icon=gdoc_heart >}}
+
+{{< progress title="Type: note" value=10 icon=gdoc_heart type=note >}}
+
+{{< progress title="Type: tip" value=70 icon=gdoc_heart type=tip >}}
+
+{{< progress title="Type: important" value=30 icon=gdoc_heart type=important >}}
+
+{{< progress title="Type: caution" value=90 icon=gdoc_heart type=caution >}}
+
+{{< progress title="Type: warning" value=80 icon=gdoc_heart type=warning >}}
 <!-- spellchecker-enable -->
 <!-- prettier-ignore-end -->
diff --git a/exampleSite/data/properties/shortcode-progress.yaml b/exampleSite/data/properties/shortcode-progress.yaml
index 39d3cd0..14c36f3 100644
--- a/exampleSite/data/properties/shortcode-progress.yaml
+++ b/exampleSite/data/properties/shortcode-progress.yaml
@@ -1,5 +1,10 @@
 ---
 properties:
+  - name: type
+    type: string
+    description: Color type of the progress bar. Supported values are `main|note|tip|important|caution|warning`.
+    required: false
+    defaultValue: main
   - name: value
     type: integer
     description: Progress value.
diff --git a/layouts/shortcodes/hint.html b/layouts/shortcodes/hint.html
index 15149b6..589fca4 100644
--- a/layouts/shortcodes/hint.html
+++ b/layouts/shortcodes/hint.html
@@ -1,6 +1,6 @@
-{{ $type := default "note" (.Get "type") }}
-{{ $icon := .Get "icon" }}
-{{ $title := default ($type | title) (.Get "title") }}
+{{- $type := default "note" (.Get "type") }}
+{{- $icon := .Get "icon" }}
+{{- $title := default ($type | title) (.Get "title") }}
 
 
 <blockquote class="gdoc-hint {{ $type | lower }}">
diff --git a/layouts/shortcodes/progress.html b/layouts/shortcodes/progress.html
index 244f92e..2142a0f 100644
--- a/layouts/shortcodes/progress.html
+++ b/layouts/shortcodes/progress.html
@@ -1,4 +1,5 @@
 {{- $value := default 0 (.Get "value") -}}
+{{- $type := default "main" (.Get "type") }}
 {{- $title := .Get "title" -}}
 {{- $icon := .Get "icon" -}}
 
@@ -15,7 +16,7 @@
   </div>
   <div class="gdoc-progress__wrap">
     <div
-      class="gdoc-progress__bar"
+      class="gdoc-progress__bar {{ $type | lower }}"
       data-percent="{{ $value }}"
       style="width: {{ $value }}%;"
     ></div>
diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss
index 1def38f..49bf421 100644
--- a/src/sass/_color_mode.scss
+++ b/src/sass/_color_mode.scss
@@ -95,6 +95,10 @@
       filter: saturate(2.5) brightness(0.85);
     }
 
+    .gdoc-progress__bar {
+      filter: saturate(0.85) brightness(0.85);
+    }
+
     .gdoc-hint,
     .admonitionblock {
       a {
diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss
index 3ba650a..fe20199 100644
--- a/src/sass/_shortcodes.scss
+++ b/src/sass/_shortcodes.scss
@@ -281,6 +281,23 @@
       transparent
     );
     background-size: 2.5em 2.5em;
-    background-color: defaults.$main-color !important;
+    background-color: defaults.$main-color;
+
+    @each $name, $color in defaults.$hint-colors {
+      &.#{$name} {
+        background-image: linear-gradient(
+          -45deg,
+          #{color.scale($color, $lightness: -20%)} 25%,
+          transparent 25%,
+          transparent 50%,
+          #{color.scale($color, $lightness: -20%)} 50%,
+          #{color.scale($color, $lightness: -20%)} 75%,
+          transparent 75%,
+          transparent
+        );
+
+        background-color: $color;
+      }
+    }
   }
 }