diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md
index aaa88785ccb..f3158d0bb50 100644
--- a/core/src/components/ripple-effect/readme.md
+++ b/core/src/components/ripple-effect/readme.md
@@ -21,6 +21,13 @@ The ripple effect component adds the [Material Design ink ripple interaction eff
 | `addRipple` | Adds the ripple effect to the parent element |
 
 
+## CSS Custom Properties
+
+| Name           | Description                     |
+| -------------- | ------------------------------- |
+| `--background` | Background of the ripple effect |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/ripple-effect/ripple-effect.scss b/core/src/components/ripple-effect/ripple-effect.scss
index 585855e4018..7a0681dc224 100644
--- a/core/src/components/ripple-effect/ripple-effect.scss
+++ b/core/src/components/ripple-effect/ripple-effect.scss
@@ -5,6 +5,11 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --background: Background of the ripple effect
+   */
+  --background: currentColor;
+
   @include position(0, 0, 0, 0);
 
   position: absolute;
@@ -17,7 +22,7 @@
 
   position: absolute;
 
-  background-color: currentColor;
+  background: var(--background);
   color: inherit;
 
   contain: strict;