diff --git a/core/src/components/note/note.scss b/core/src/components/note/note.scss
index b3a2300a50..dacbaaffc8 100644
--- a/core/src/components/note/note.scss
+++ b/core/src/components/note/note.scss
@@ -4,6 +4,10 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --color: Color of the note
+   */
+
   color: var(--color);
 
   font-family: $font-family-base;
diff --git a/core/src/components/note/readme.md b/core/src/components/note/readme.md
index d23009d987..76e5b53928 100644
--- a/core/src/components/note/readme.md
+++ b/core/src/components/note/readme.md
@@ -14,6 +14,13 @@ Notes are text elements generally used as subtitles that provide more informatio
 | `mode`   | `mode`    | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.                                                                                                                                                                              | `Mode`  |
 
 
+## CSS Custom Properties
+
+| Name      | Description       |
+| --------- | ----------------- |
+| `--color` | Color of the note |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/note/test/standalone/index.html b/core/src/components/note/test/standalone/index.html
index 551a619dc3..3566a1efc5 100644
--- a/core/src/components/note/test/standalone/index.html
+++ b/core/src/components/note/test/standalone/index.html
@@ -13,6 +13,9 @@
   <!-- Default -->
   <ion-note>Default Note</ion-note>
 
+  <!-- Custom -->
+  <ion-note class="custom">Custom Note</ion-note>
+
   <!-- Colors -->
   <ion-note color="primary">Primary Note</ion-note>
   <ion-note color="secondary">Secondary Note</ion-note>
@@ -36,5 +39,11 @@
       <ion-label>Note (Start)</ion-label>
     </ion-item>
   </ion-list>
+
+  <style>
+    .custom {
+      --color: hotpink;
+    }
+  </style>
 </body>
 </html>