diff --git a/src/widget/edit-widget/edit-widget-control-creator.js b/src/widget/edit-widget/edit-widget-control-creator.js
index 78d1b28..ae457b7 100644
--- a/src/widget/edit-widget/edit-widget-control-creator.js
+++ b/src/widget/edit-widget/edit-widget-control-creator.js
@@ -129,7 +129,8 @@ export default function CreateControls(widgetType = null, widget = null, session
         case 'Box':
             DialogControls.push(
                 <EditWidgetColorControl key={0} widget={widget} controlId={'customProperties.border_color'} label={'Border color'} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetColorControl key={1} widget={widget} controlId={'customProperties.background_color'} label={'Background color'} handleChange={e => handleChange(e)} />
+                <EditWidgetColorControl key={1} widget={widget} controlId={'customProperties.background_color'} label={'Background color'} handleChange={e => handleChange(e)} />,
+                <EditWidgetNumberControl key={2} widget={widget} controlId={'customProperties.background_color_opacity'} label={'Background opacity'} defaultValue={0.5} handleChange={(e) => handleChange(e)} />
             );
             break;
         case 'Label':
diff --git a/src/widget/edit-widget/edit-widget-number-control.js b/src/widget/edit-widget/edit-widget-number-control.js
index 7b4ffa5..5354863 100644
--- a/src/widget/edit-widget/edit-widget-number-control.js
+++ b/src/widget/edit-widget/edit-widget-number-control.js
@@ -25,21 +25,25 @@ class EditWidgetNumberControl extends Component {
     this.state = {
       widget: {
         customProperties:{}
-      }
-    };
+      }         
+     };
   }
-
+  
   static getDerivedStateFromProps(props, state){
     return{
-      widget: props.widget
-    };
-  }
+      widget: props.widget   
+     };
+  } 
 
-  render() {   
+  render() {
+    let step = 1;
+    if(this.props.controlId ==='customProperties.background_color_opacity'){
+      step = 0.1;
+    }   
     return (
         <FormGroup controlId={this.props.controlId}>
           <FormLabel>{this.props.label}</FormLabel>
-          <FormControl type="number" step="any" value={this.state.widget[this.props.controlId]} onChange={e => this.props.handleChange(e)} />
+          <FormControl type="number" step={step} value={this.state.widget[this.props.controlId]} onChange={e => this.props.handleChange(e)} />
         </FormGroup>
     );
   }
diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js
index 7c6f416..eaa80d9 100644
--- a/src/widget/widget-factory.js
+++ b/src/widget/widget-factory.js
@@ -170,6 +170,7 @@ class WidgetFactory {
                 widget.width = 100;
                 widget.height = 100;
                 widget.customProperties.border_color = 0;
+                widget.customProperties.background_color_opacity = 0.5;
                 widget.z = 0;
                 break;
             case 'HTML':
diff --git a/src/widget/widgets/box.js b/src/widget/widgets/box.js
index 758dec3..ff470f3 100644
--- a/src/widget/widgets/box.js
+++ b/src/widget/widgets/box.js
@@ -27,7 +27,7 @@ class WidgetBox extends Component {
     let colorStyle = {
       borderColor: colors[this.props.widget.customProperties.border_color],
       backgroundColor: colors[this.props.widget.customProperties.background_color],
-      opacity: this.props.widget.customProperties.background_color_opacity
+      opacity: this.props.widget.customProperties.background_color_opacity,
     }
 
     return (