diff --git a/src/Bubbles.js b/src/Bubbles.js
index 5167ec1..7c327bd 100644
--- a/src/Bubbles.js
+++ b/src/Bubbles.js
@@ -7,13 +7,15 @@ export default class Bubbles extends Component {
   static propTypes = {
     size: PropTypes.number,
     color: PropTypes.string,
-    spaceBetween: PropTypes.number
+    spaceBetween: PropTypes.number,
+    bgColor:PropTypes.string
   };
 
   static defaultProps = {
     spaceBetween: 6,
     size: 11,
-    color: '#000'
+    color: '#000',
+    bgColor:'transparent'
   };
 
   state = {
@@ -77,11 +79,11 @@ export default class Bubbles extends Component {
   }
 
   render() {
-    const { size, spaceBetween } = this.props;
+    const { size, spaceBetween ,bgColor} = this.props;
     const width = size * 6 + spaceBetween * 2;
     const height = size * 2;
 
-    return (<Surface width={width} height={height}>
+    return (<Surface width={width} height={height} style={{backgroundColor:bgColor}}>
       {this.renderBubble(0)}
       {this.renderBubble(1)}
       {this.renderBubble(2)}