diff --git a/apps/documenteditor/main/app/template/ImageSettings.template b/apps/documenteditor/main/app/template/ImageSettings.template
index 3337014ffe..c66cb77652 100644
--- a/apps/documenteditor/main/app/template/ImageSettings.template
+++ b/apps/documenteditor/main/app/template/ImageSettings.template
@@ -37,6 +37,24 @@
             <div class="separator horizontal"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="image-panel-transparent-fill" style="width: 100%;">
+                <label class="header" style="display:block;"><%= scope.strTransparency %></label>
+                <div style="display: inline-block; margin-top: 3px;">
+                    <label id="image-lbl-transparency-start">0</label>
+                    <div id="image-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
+                    <label id="image-lbl-transparency-end">100</label>
+                </div>
+                <div id="image-spin-transparency" class="float-right"></div>
+            </div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr>
         <td colspan=2 class="padding-small">
             <label class="header"><%= scope.textRotation %></label>
diff --git a/apps/documenteditor/main/app/view/ImageSettings.js b/apps/documenteditor/main/app/view/ImageSettings.js
index 1f37fabc66..5242546eb4 100644
--- a/apps/documenteditor/main/app/view/ImageSettings.js
+++ b/apps/documenteditor/main/app/view/ImageSettings.js
@@ -310,6 +310,37 @@ define([
             this.btnResetCrop.on('click', _.bind(this.onResetCrop, this));
             this.lockedControls.push(this.btnResetCrop);
 
+            this.numTransparency = new Common.UI.MetricSpinner({
+                el: $('#image-spin-transparency'),
+                step: 1,
+                width: 62,
+                value: '100 %',
+                defaultUnit : "%",
+                maxValue: 100,
+                minValue: 0,
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big',
+                ariaLabel: this.strTransparency
+            });
+            this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
+            this.numTransparency.on('inputleave', function(){ this.fireEvent('editcomplete', this);});
+            this.lockedControls.push(this.numTransparency);
+
+            this.sldrTransparency = new Common.UI.SingleSlider({
+                el: $('#image-slider-transparency'),
+                width: 75,
+                minValue: 0,
+                maxValue: 100,
+                value: 100
+            });
+            this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
+            this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
+            this.lockedControls.push(this.sldrTransparency);
+
+            this.lblTransparencyStart = $(this.el).find('#image-lbl-transparency-start');
+            this.lblTransparencyEnd = $(this.el).find('#image-lbl-transparency-end');
+            
             this.btnSelectImage = new Common.UI.Button({
                 parentEl: $('#image-button-replace'),
                 cls: 'btn-text-menu-default',
@@ -448,6 +479,8 @@ define([
                 this.btnRotate90.setDisabled(value || this._locked);
                 this.btnFlipV.setDisabled(value || this._locked);
                 this.btnFlipH.setDisabled(value || this._locked);
+                this.numTransparency.setDisabled(value || this._locked);
+                this.sldrTransparency.setDisabled(value || this._locked);
 
                 if (this._state.isOleObject) {
                     var plugin = DE.getCollection('Common.Collections.Plugins').findWhere({guid: pluginGuid});
@@ -455,6 +488,19 @@ define([
                 } else {
                     this.btnSelectImage.setDisabled(pluginGuid===null || this._locked);
                 }
+
+                var transparency = props.asc_getTransparent();
+                if (Math.abs(this._state.Transparency - transparency) > 0.001 || 
+                    Math.abs(this.numTransparency.getNumberValue() - transparency) > 0.001 || 
+                    (this._state.Transparency === null || transparency === null) && 
+                    (this._state.Transparency !== transparency || this.numTransparency.getNumberValue() !== transparency)) {
+        
+                    if (transparency !== undefined) {
+                        this.sldrTransparency.setValue((transparency === null) ? 100 : transparency / 255 * 100, true);
+                        this.numTransparency.setValue(this.sldrTransparency.getValue(), true);
+                    }
+                    this._state.Transparency = transparency;
+                }
             }
         },
 
@@ -692,6 +738,46 @@ define([
             }
         },
 
+        onNumTransparencyChange: function(field, newValue, oldValue, eOpts){
+            this.sldrTransparency.setValue(field.getNumberValue(), true);
+            if (this.api)  {
+                var num = field.getNumberValue();
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putTransparent(num * 2.55); 
+                this.api.ImgApply(properties);
+            }
+        },
+
+        onTransparencyChange: function(field, newValue, oldValue){
+            this._sliderChanged = newValue;
+            this.numTransparency.setValue(newValue, true);
+
+            if (this._sendUndoPoint) {
+                this.api.setStartPointHistory();
+                this._sendUndoPoint = false;
+                this.updateslider = setInterval(_.bind(this._transparencyApplyFunc, this), 100);
+            }
+        },
+
+        onTransparencyChangeComplete: function(field, newValue, oldValue){
+            clearInterval(this.updateslider);
+            this._sliderChanged = newValue;
+            if (!this._sendUndoPoint) { 
+                this.api.setEndPointHistory();
+                this._transparencyApplyFunc();
+            }
+            this._sendUndoPoint = true;
+        },
+
+         _transparencyApplyFunc: function() {
+            if (this._sliderChanged!==undefined) {
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putTransparent(this._sliderChanged * 2.55);
+                this.api.ImgApply(properties);
+                this._sliderChanged = undefined;
+            }
+        },
+
         setLocked: function (locked) {
             this._locked = locked;
         },
diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json
index 84d73ebff8..e065d54582 100644
--- a/apps/documenteditor/main/locale/en.json
+++ b/apps/documenteditor/main/locale/en.json
@@ -2534,6 +2534,7 @@
   "DE.Views.ImageSettings.txtThrough": "Through",
   "DE.Views.ImageSettings.txtTight": "Tight",
   "DE.Views.ImageSettings.txtTopAndBottom": "Top and bottom",
+  "DE.Views.ImageSettings.strTransparency": "Opacity",
   "DE.Views.ImageSettingsAdvanced.strMargins": "Text padding",
   "DE.Views.ImageSettingsAdvanced.textAbsoluteWH": "Absolute",
   "DE.Views.ImageSettingsAdvanced.textAlignment": "Alignment",
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index 8241fcafb8..8260663b49 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -136,6 +136,10 @@
         #image-button-90, #image-button-flipv {
             display: inline-block;
         }
+
+        #image-spin-transparency {
+            display: inline-block;
+        }
     }
 
     &#id-header-settings {
diff --git a/apps/pdfeditor/main/app/template/ImageSettings.template b/apps/pdfeditor/main/app/template/ImageSettings.template
index 964eb9c055..937571fafc 100644
--- a/apps/pdfeditor/main/app/template/ImageSettings.template
+++ b/apps/pdfeditor/main/app/template/ImageSettings.template
@@ -37,6 +37,24 @@
             <div class="separator horizontal"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="image-panel-transparent-fill" style="width: 100%;">
+                <label class="header" style="display:block;"><%= scope.strTransparency %></label>
+                <div style="display: inline-block; margin-top: 3px;">
+                    <label id="image-lbl-transparency-start">0</label>
+                    <div id="image-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
+                    <label id="image-lbl-transparency-end">100</label>
+                </div>
+                <div id="image-spin-transparency" class="float-right"></div>
+            </div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr>
         <td colspan=2 class="padding-small">
             <label class="header"><%= scope.textRotation %></label>
diff --git a/apps/pdfeditor/main/app/view/ImageSettings.js b/apps/pdfeditor/main/app/view/ImageSettings.js
index cd0b4af80d..d03b904dd9 100644
--- a/apps/pdfeditor/main/app/view/ImageSettings.js
+++ b/apps/pdfeditor/main/app/view/ImageSettings.js
@@ -231,6 +231,37 @@ define([
             this.btnResetCrop.on('click', _.bind(this.onResetCrop, this));
             this.lockedControls.push(this.btnResetCrop);
 
+            this.numTransparency = new Common.UI.MetricSpinner({
+                el: $('#image-spin-transparency'),
+                step: 1,
+                width: 62,
+                value: '100 %',
+                defaultUnit : "%",
+                maxValue: 100,
+                minValue: 0,
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big',
+                ariaLabel: this.strTransparency
+            });
+            this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
+            this.numTransparency.on('inputleave', function(){ this.fireEvent('editcomplete', this);});
+            this.lockedControls.push(this.numTransparency);
+
+            this.sldrTransparency = new Common.UI.SingleSlider({
+                el: $('#image-slider-transparency'),
+                width: 75,
+                minValue: 0,
+                maxValue: 100,
+                value: 100
+            });
+            this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
+            this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
+            this.lockedControls.push(this.sldrTransparency);
+
+            this.lblTransparencyStart = $(this.el).find('#image-lbl-transparency-start');
+            this.lblTransparencyEnd = $(this.el).find('#image-lbl-transparency-end');
+
             this.btnRotate270 = new Common.UI.Button({
                 parentEl: $('#image-button-270', this.$el),
                 cls: 'btn-toolbar',
@@ -371,6 +402,8 @@ define([
                 this.btnRotate90.setDisabled(value || this._locked);
                 this.btnFlipV.setDisabled(value || this._locked);
                 this.btnFlipH.setDisabled(value || this._locked);
+                this.numTransparency.setDisabled(value || this._locked);
+                this.sldrTransparency.setDisabled(value || this._locked);
 
                 if (this._state.isOleObject) {
                     var plugin = PDFE.getCollection('Common.Collections.Plugins').findWhere({guid: pluginGuid});
@@ -378,6 +411,19 @@ define([
                 } else {
                     this.btnSelectImage.setDisabled(pluginGuid===null || this._locked);
                 }
+
+                var transparency = props.asc_getTransparent();
+                if (Math.abs(this._state.Transparency - transparency) > 0.001 || 
+                    Math.abs(this.numTransparency.getNumberValue() - transparency) > 0.001 || 
+                    (this._state.Transparency === null || transparency === null) && 
+                    (this._state.Transparency !== transparency || this.numTransparency.getNumberValue() !== transparency)) {
+        
+                    if (transparency !== undefined) {
+                        this.sldrTransparency.setValue((transparency === null) ? 100 : transparency / 255 * 100, true);
+                        this.numTransparency.setValue(this.sldrTransparency.getValue(), true);
+                    }
+                    this._state.Transparency = transparency;
+                }
             }
         },
 
@@ -538,6 +584,46 @@ define([
             }
         },
 
+        onNumTransparencyChange: function(field, newValue, oldValue, eOpts){
+            this.sldrTransparency.setValue(field.getNumberValue(), true);
+            if (this.api)  {
+                var num = field.getNumberValue();
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putTransparent(num * 2.55); 
+                this.api.ImgApply(properties)
+            }
+        },
+
+        onTransparencyChange: function(field, newValue, oldValue){
+            this._sliderChanged = newValue;
+            this.numTransparency.setValue(newValue, true);
+
+            if (this._sendUndoPoint) {
+                this.api.setStartPointHistory();
+                this._sendUndoPoint = false;
+                this.updateslider = setInterval(_.bind(this._transparencyApplyFunc, this), 100);
+            }
+        },
+
+        onTransparencyChangeComplete: function(field, newValue, oldValue){
+            clearInterval(this.updateslider);
+            this._sliderChanged = newValue;
+            if (!this._sendUndoPoint) { 
+                this.api.setEndPointHistory();
+                this._transparencyApplyFunc();
+            }
+            this._sendUndoPoint = true;
+        },
+
+         _transparencyApplyFunc: function() {
+            if (this._sliderChanged!==undefined) {
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putTransparent(this._sliderChanged * 2.55);
+                this.api.ImgApply(properties)
+                this._sliderChanged = undefined;
+            }
+        },
+
         setLocked: function (locked) {
             this._locked = locked;
         },
diff --git a/apps/pdfeditor/main/locale/en.json b/apps/pdfeditor/main/locale/en.json
index 000bb564ff..f25fd2c392 100644
--- a/apps/pdfeditor/main/locale/en.json
+++ b/apps/pdfeditor/main/locale/en.json
@@ -1412,6 +1412,7 @@
   "PDFE.Views.ImageSettings.textRotation": "Rotation",
   "PDFE.Views.ImageSettings.textSize": "Size",
   "PDFE.Views.ImageSettings.textWidth": "Width",
+  "PDFE.Views.ImageSettings.strTransparency": "Opacity",
   "PDFE.Views.ImageSettingsAdvanced.textAlt": "Alternative text",
   "PDFE.Views.ImageSettingsAdvanced.textAltDescription": "Description",
   "PDFE.Views.ImageSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, shape, chart, or table.",
diff --git a/apps/pdfeditor/main/resources/less/rightmenu.less b/apps/pdfeditor/main/resources/less/rightmenu.less
index ece76084c6..9378cbc38e 100644
--- a/apps/pdfeditor/main/resources/less/rightmenu.less
+++ b/apps/pdfeditor/main/resources/less/rightmenu.less
@@ -51,6 +51,10 @@
         #image-button-90, #image-button-flipv {
             display: inline-block;
         }
+
+        #image-spin-transparency {
+            display: inline-block;
+        }
     }
 
     &#id-table-settings {
diff --git a/apps/presentationeditor/main/app/template/ImageSettings.template b/apps/presentationeditor/main/app/template/ImageSettings.template
index 6d0b795e6d..c89fdaeff9 100644
--- a/apps/presentationeditor/main/app/template/ImageSettings.template
+++ b/apps/presentationeditor/main/app/template/ImageSettings.template
@@ -37,6 +37,24 @@
             <div class="separator horizontal"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="image-panel-transparent-fill" style="width: 100%;">
+                <label class="header" style="display:block;"><%= scope.strTransparency %></label>
+                <div style="display: inline-block; margin-top: 3px;">
+                    <label id="image-lbl-transparency-start">0</label>
+                    <div id="image-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
+                    <label id="image-lbl-transparency-end">100</label>
+                </div>
+                <div id="image-spin-transparency" class="float-right"></div>
+            </div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr>
         <td colspan=2 class="padding-small">
             <label class="header"><%= scope.textRotation %></label>
diff --git a/apps/presentationeditor/main/app/view/ImageSettings.js b/apps/presentationeditor/main/app/view/ImageSettings.js
index f38d113738..3089e63e66 100644
--- a/apps/presentationeditor/main/app/view/ImageSettings.js
+++ b/apps/presentationeditor/main/app/view/ImageSettings.js
@@ -232,6 +232,37 @@ define([
             this.btnResetCrop.on('click', _.bind(this.onResetCrop, this));
             this.lockedControls.push(this.btnResetCrop);
 
+            this.numTransparency = new Common.UI.MetricSpinner({
+                el: $('#image-spin-transparency'),
+                step: 1,
+                width: 62,
+                value: '100 %',
+                defaultUnit : "%",
+                maxValue: 100,
+                minValue: 0,
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big',
+                ariaLabel: this.strTransparency
+            });
+            this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
+            this.numTransparency.on('inputleave', function(){ this.fireEvent('editcomplete', this);});
+            this.lockedControls.push(this.numTransparency);
+
+            this.sldrTransparency = new Common.UI.SingleSlider({
+                el: $('#image-slider-transparency'),
+                width: 75,
+                minValue: 0,
+                maxValue: 100,
+                value: 100
+            });
+            this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
+            this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
+            this.lockedControls.push(this.sldrTransparency);
+
+            this.lblTransparencyStart = $(this.el).find('#image-lbl-transparency-start');
+            this.lblTransparencyEnd = $(this.el).find('#image-lbl-transparency-end');
+
             this.btnRotate270 = new Common.UI.Button({
                 parentEl: $('#image-button-270', this.$el),
                 cls: 'btn-toolbar',
@@ -374,6 +405,8 @@ define([
                 this.btnRotate90.setDisabled(value || this._locked);
                 this.btnFlipV.setDisabled(value || this._locked);
                 this.btnFlipH.setDisabled(value || this._locked);
+                this.numTransparency.setDisabled(value || this._locked);
+                this.sldrTransparency.setDisabled(value || this._locked);
 
                 if (this._state.isOleObject) {
                     var plugin = PE.getCollection('Common.Collections.Plugins').findWhere({guid: pluginGuid});
@@ -381,6 +414,19 @@ define([
                 } else {
                     this.btnSelectImage.setDisabled(pluginGuid===null || this._locked);
                 }
+
+                var transparency = props.asc_getTransparent();
+                if (Math.abs(this._state.Transparency - transparency) > 0.001 || 
+                    Math.abs(this.numTransparency.getNumberValue() - transparency) > 0.001 || 
+                    (this._state.Transparency === null || transparency === null) && 
+                    (this._state.Transparency !== transparency || this.numTransparency.getNumberValue() !== transparency)) {
+        
+                    if (transparency !== undefined) {
+                        this.sldrTransparency.setValue((transparency === null) ? 100 : transparency / 255 * 100, true);
+                        this.numTransparency.setValue(this.sldrTransparency.getValue(), true);
+                    }
+                    this._state.Transparency = transparency;
+                }
             }
         },
 
@@ -541,6 +587,46 @@ define([
             }
         },
 
+        onNumTransparencyChange: function(field, newValue, oldValue, eOpts){
+            this.sldrTransparency.setValue(field.getNumberValue(), true);
+            if (this.api)  {
+                var num = field.getNumberValue();
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putTransparent(num * 2.55); 
+                this.api.ImgApply(properties)
+            }
+        },
+
+        onTransparencyChange: function(field, newValue, oldValue){
+            this._sliderChanged = newValue;
+            this.numTransparency.setValue(newValue, true);
+
+            if (this._sendUndoPoint) {
+                this.api.setStartPointHistory();
+                this._sendUndoPoint = false;
+                this.updateslider = setInterval(_.bind(this._transparencyApplyFunc, this), 100);
+            }
+        },
+
+        onTransparencyChangeComplete: function(field, newValue, oldValue){
+            clearInterval(this.updateslider);
+            this._sliderChanged = newValue;
+            if (!this._sendUndoPoint) { 
+                this.api.setEndPointHistory();
+                this._transparencyApplyFunc();
+            }
+            this._sendUndoPoint = true;
+        },
+
+         _transparencyApplyFunc: function() {
+            if (this._sliderChanged!==undefined) {
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putTransparent(this._sliderChanged * 2.55);
+                this.api.ImgApply(properties)
+                this._sliderChanged = undefined;
+            }
+        },
+
         setLocked: function (locked) {
             this._locked = locked;
         },
diff --git a/apps/presentationeditor/main/locale/en.json b/apps/presentationeditor/main/locale/en.json
index 386aab52f5..b132bf3978 100644
--- a/apps/presentationeditor/main/locale/en.json
+++ b/apps/presentationeditor/main/locale/en.json
@@ -2230,6 +2230,7 @@
   "PE.Views.ImageSettings.textRotation": "Rotation",
   "PE.Views.ImageSettings.textSize": "Size",
   "PE.Views.ImageSettings.textWidth": "Width",
+  "PE.Views.ImageSettings.strTransparency": "Opacity",
   "PE.Views.ImageSettingsAdvanced.textAlt": "Alternative text",
   "PE.Views.ImageSettingsAdvanced.textAltDescription": "Description",
   "PE.Views.ImageSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, shape, chart, or table.",
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index f215e2b876..b945b5cfb9 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -81,6 +81,10 @@
         #image-button-90, #image-button-flipv {
             display: inline-block;
         }
+
+        #image-spin-transparency {
+            display: inline-block;
+        }
     }
 
     &#id-table-settings {
diff --git a/apps/spreadsheeteditor/main/app/template/ImageSettings.template b/apps/spreadsheeteditor/main/app/template/ImageSettings.template
index 8f80ba7771..33ec3c16d4 100644
--- a/apps/spreadsheeteditor/main/app/template/ImageSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/ImageSettings.template
@@ -39,6 +39,24 @@
             <div class="separator horizontal"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="image-panel-transparent-fill" style="width: 100%;">
+                <label class="header" style="display:block;"><%= scope.strTransparency %></label>
+                <div style="display: inline-block; margin-top: 3px;">
+                    <label id="image-lbl-transparency-start">0</label>
+                    <div id="image-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
+                    <label id="image-lbl-transparency-end">100</label>
+                </div>
+                <div id="image-spin-transparency" class="float-right"></div>
+            </div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr>
         <td colspan=2 class="padding-small">
             <label class="header"><%= scope.textRotation %></label>
diff --git a/apps/spreadsheeteditor/main/app/view/ImageSettings.js b/apps/spreadsheeteditor/main/app/view/ImageSettings.js
index b7c50a8283..ab774c8e7c 100644
--- a/apps/spreadsheeteditor/main/app/view/ImageSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ImageSettings.js
@@ -291,6 +291,37 @@ define([
             this.btnResetCrop.on('click', _.bind(this.onResetCrop, this));
             this.lockedControls.push(this.btnResetCrop);
 
+            this.numTransparency = new Common.UI.MetricSpinner({
+                el: $('#image-spin-transparency'),
+                step: 1,
+                width: 62,
+                value: '100 %',
+                defaultUnit : "%",
+                maxValue: 100,
+                minValue: 0,
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big',
+                ariaLabel: this.strTransparency
+            });
+            this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
+            this.numTransparency.on('inputleave', function(){ this.fireEvent('editcomplete', this);});
+            this.lockedControls.push(this.numTransparency);
+
+            this.sldrTransparency = new Common.UI.SingleSlider({
+                el: $('#image-slider-transparency'),
+                width: 75,
+                minValue: 0,
+                maxValue: 100,
+                value: 100
+            });
+            this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
+            this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
+            this.lockedControls.push(this.sldrTransparency);
+
+            this.lblTransparencyStart = $(this.el).find('#image-lbl-transparency-start');
+            this.lblTransparencyEnd = $(this.el).find('#image-lbl-transparency-end');
+
             this.btnRotate270 = new Common.UI.Button({
                 parentEl: $('#image-button-270', me.$el),
                 cls: 'btn-toolbar',
@@ -474,6 +505,8 @@ define([
                 this.btnRotate90.setDisabled(value || this._locked);
                 this.btnFlipV.setDisabled(value || this._locked);
                 this.btnFlipH.setDisabled(value || this._locked);
+                this.numTransparency.setDisabled(value || this._locked);
+                this.sldrTransparency.setDisabled(value || this._locked);
 
                 if (this._state.isOleObject) {
                     var plugin = SSE.getCollection('Common.Collections.Plugins').findWhere({guid: pluginGuid});
@@ -481,6 +514,19 @@ define([
                 } else {
                     this.btnSelectImage.setDisabled(pluginGuid===null || this._locked);
                 }
+
+                var transparency = props.asc_getTransparent();
+                if (Math.abs(this._state.Transparency - transparency) > 0.001 || 
+                    Math.abs(this.numTransparency.getNumberValue() - transparency) > 0.001 || 
+                    (this._state.Transparency === null || transparency === null) && 
+                    (this._state.Transparency !== transparency || this.numTransparency.getNumberValue() !== transparency)) {
+        
+                    if (transparency !== undefined) {
+                        this.sldrTransparency.setValue((transparency === null) ? 100 : transparency / 255 * 100, true);
+                        this.numTransparency.setValue(this.sldrTransparency.getValue(), true);
+                    }
+                    this._state.Transparency = transparency;
+                }
             }
         },
 
@@ -627,11 +673,51 @@ define([
             if (this.api) {
                 var properties = new Asc.asc_CImgProperty();
                 properties.put_ResetCrop(true);
-                this.api.asc_setGraphicObjectProps(properties);;
+                this.api.asc_setGraphicObjectProps(properties);
                 Common.NotificationCenter.trigger('edit:complete', this);
             }
         },
 
+        onNumTransparencyChange: function(field, newValue, oldValue, eOpts){
+            this.sldrTransparency.setValue(field.getNumberValue(), true);
+            if (this.api)  {
+                var num = field.getNumberValue();
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putTransparent(num * 2.55); 
+                this.api.asc_setGraphicObjectProps(properties);
+            }
+        },
+
+        onTransparencyChange: function(field, newValue, oldValue){
+            this._sliderChanged = newValue;
+            this.numTransparency.setValue(newValue, true);
+
+            if (this._sendUndoPoint) {
+                this.api.setStartPointHistory();
+                this._sendUndoPoint = false;
+                this.updateslider = setInterval(_.bind(this._transparencyApplyFunc, this), 100);
+            }
+        },
+
+        onTransparencyChangeComplete: function(field, newValue, oldValue){
+            clearInterval(this.updateslider);
+            this._sliderChanged = newValue;
+            if (!this._sendUndoPoint) { 
+                this.api.setEndPointHistory();
+                this._transparencyApplyFunc();
+            }
+            this._sendUndoPoint = true;
+        },
+
+         _transparencyApplyFunc: function() {
+            if (this._sliderChanged!==undefined) {
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putTransparent(this._sliderChanged * 2.55);
+                this.api.asc_setGraphicObjectProps(properties);
+                this._sliderChanged = undefined;
+            }
+        },
+
         setLocked: function (locked) {
             this._locked = locked;
         },
diff --git a/apps/spreadsheeteditor/main/locale/en.json b/apps/spreadsheeteditor/main/locale/en.json
index 569fb4bc4e..541a6e873b 100644
--- a/apps/spreadsheeteditor/main/locale/en.json
+++ b/apps/spreadsheeteditor/main/locale/en.json
@@ -3164,6 +3164,7 @@
   "SSE.Views.ImageSettings.textRotation": "Rotation",
   "SSE.Views.ImageSettings.textSize": "Size",
   "SSE.Views.ImageSettings.textWidth": "Width",
+  "SSE.Views.ImageSettings.strTransparency": "Opacity",
   "SSE.Views.ImageSettingsAdvanced.textAbsolute": "Don't move or size with cells",
   "SSE.Views.ImageSettingsAdvanced.textAlt": "Alternative text",
   "SSE.Views.ImageSettingsAdvanced.textAltDescription": "Description",
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index 73c03ef1f0..56aecb6ad0 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -97,6 +97,10 @@
         #image-button-90, #image-button-flipv {
             display: inline-block;
         }
+
+        #image-spin-transparency {
+            display: inline-block;
+        }
     }
 
     &#id-chart-settings {