diff --git a/README.md b/README.md
index 24e553246..7d02301aa 100644
--- a/README.md
+++ b/README.md
@@ -774,6 +774,7 @@ Every component above that has `(Base)` after it has been extended from a common
 | bgPosition | PropTypes.string | Set `backgroundPosition` value|
 | bgRepeat | PropTypes.string | Set `backgroundRepeat` value|
 | bgDarken | PropTypes.number | Float value from 0.0 to 1.0 specifying how much to darken the bgImage image|
+| bgLighten | PropTypes.number | Float value from 0.0 to 1.0 specifying how much to lighten the bgImage image|
 | overflow | PropTypes.string | Set `overflow` value|
 | height | PropTypes.string | Set `height` value|
 
diff --git a/docs/props.md b/docs/props.md
index 5fefe52ef..61bfce423 100644
--- a/docs/props.md
+++ b/docs/props.md
@@ -17,3 +17,4 @@ Every component in the Tag API that has `(Base)` after it has been extended from
 | bgColor | PropTypes.string | Set `backgroundColor` value|
 | bgImage | PropTypes.string | Set `backgroundImage` value|
 | bgDarken | PropTypes.number | Float value from 0.0 to 1.0 specifying how much to darken the bgImage image|
+| bgLighten | PropTypes.number | Float value from 0.0 to 1.0 specifying how much to lighten the bgImage image|
diff --git a/example/src/index.js b/example/src/index.js
index e8d90735d..4a72c019f 100644
--- a/example/src/index.js
+++ b/example/src/index.js
@@ -101,7 +101,7 @@ export default class Presentation extends React.Component {
             theme="dark"
           />
         </Slide>
-        <Slide transition={['slide']} bgImage={images.city.replace('/', '')} bgDarken={0.75}>
+        <Slide transition={['slide']} bgImage={images.city.replace('/', '')}  bgOverlayColour={'#FFA500'} bgTransparentize="0.8">
           <Appear fid="1">
             <Heading size={1} caps fit textColor="primary">
               Full Width
diff --git a/package.json b/package.json
index aba6abe51..9a1ee94bc 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "lodash": "^4.17.4",
     "marksy": "^5.0.0",
     "normalize.css": "^7.0.0",
+    "polished": "^1.9.0",
     "prismjs": "^1.6.0",
     "react-emotion": "^8.0.8",
     "react-live": "^1.8.0-2",
diff --git a/src/utils/base.js b/src/utils/base.js
index 2137b696c..ae80ed2b0 100644
--- a/src/utils/base.js
+++ b/src/utils/base.js
@@ -51,6 +51,15 @@ const convertFontSizeToPx = function (fontSize) {
   return convertedFontSize;
 };
 
+const hexToRGB = function (hex) {
+  hex = (hex.charAt(0) === '#') ? hex.substring(1, 7) : hex;
+  const RGB = [];
+  RGB.push(parseInt(hex.substring(0, 2), 16)); // R
+  RGB.push(parseInt(hex.substring(2, 4), 16)); // G
+  RGB.push(parseInt(hex.substring(4, 6), 16)); // B
+  return RGB;
+};
+
 export const getStyles = function getStyles() {
   if (process.env.NODE_ENV !== 'production' && typeof this.warnedAboutFontSize === 'undefined') {
     this.warnedAboutFontSize = false;
@@ -68,7 +77,8 @@ export const getStyles = function getStyles() {
     textAlign,
     bgColor,
     bgImage,
-    bgDarken,
+    bgOverlayColour,
+    bgOverlayIntensity,
     bgSize,
     bgPosition,
     bgRepeat,
@@ -135,9 +145,11 @@ export const getStyles = function getStyles() {
     styles.backgroundColor = color;
   }
   if (bgImage) {
-    if (bgDarken) {
+    if (bgOverlayColour) {
+      const rgbOverlay = hexToRGB(bgOverlayColour);
+      const bi = bgOverlayIntensity || 0.5; //default intensity - 0.5
       styles.backgroundImage =
-      `linear-gradient( rgba(0, 0, 0, ${bgDarken}), rgba(0, 0, 0, ${bgDarken}) ), url(${bgImage})`;
+      `linear-gradient( rgba(${rgbOverlay.join(',')}, ${bi}), rgba(${rgbOverlay.join(',')}, ${bi}) ), url(${bgImage})`;
     } else {
       styles.backgroundImage = `url(${bgImage})`;
     }