diff --git a/core/block_svg.js b/core/block_svg.js
index 48423cda9..c0ab26588 100644
--- a/core/block_svg.js
+++ b/core/block_svg.js
@@ -1323,6 +1323,18 @@ Blockly.BlockSvg.prototype.setHighlighted = function(highlighted) {
   this.pathObject.updateHighlighted(highlighted);
 };
 
+/**
+ * Set whether the block is grayscale or not.
+ * @param {boolean} grayscale True if grayscale.
+ */
+Blockly.BlockSvg.prototype.setGrayscale = function(grayscale) {
+  if (!this.rendered) {
+    return;
+  }
+  this.pathObject.updateGrayscale(grayscale);
+};
+
+
 /**
  * pxt-blockly specific:
  * Set whether the block is highlighted as a warning or not.
diff --git a/core/renderers/pxt/constants.js b/core/renderers/pxt/constants.js
index e58b4f064..af32ec177 100644
--- a/core/renderers/pxt/constants.js
+++ b/core/renderers/pxt/constants.js
@@ -205,6 +205,23 @@ Blockly.pxt.ConstantProvider.prototype.createDom = function(svg) {
   this.warningGlowFilterId = warningGlowFilter.id;
   this.warningGlowFilter_ = warningGlowFilter;
 
+  // Grayscale filter
+  var grayscaleFilter = Blockly.utils.dom.createSvgElement('filter',
+      {
+        'id': 'blocklyGrayscaleFilter' + this.randomIdentifier_,
+        'height': '160%',
+        'width': '180%',
+        y: '-30%',
+        x: '-40%'
+      },
+      defs);
+  Blockly.utils.dom.createSvgElement('feColorMatrix',
+    {'type': 'saturate',
+     'values': '0.10'},
+    grayscaleFilter);
+  this.grayscaleFilterId = grayscaleFilter.id;
+  this.grayscaleFilter_ = grayscaleFilter;
+
   // Add dropdown image definitions
   var arrowSize = this.FIELD_DROPDOWN_SVG_ARROW_SIZE;
   var dropdownArrowImage = Blockly.utils.dom.createSvgElement('image',
diff --git a/core/renderers/pxt/path_object.js b/core/renderers/pxt/path_object.js
index 2752003cf..b993ab4e6 100644
--- a/core/renderers/pxt/path_object.js
+++ b/core/renderers/pxt/path_object.js
@@ -163,6 +163,29 @@ Blockly.pxt.PathObject.prototype.updateSelected = function(enable) {
   }
 };
 
+/**
+ * Set whether the block shows in grayscale or not.
+ * @param {boolean} enable True if grayscale.
+ * @package
+ */
+Blockly.pxt.PathObject.prototype.updateGrayscale = function(enable) {
+  if (enable) {
+    this.svgPath.setAttribute('filter',
+      'url(#' + this.constants_.grayscaleFilterId + ')');
+    var names = Object.keys(this.outlines_);
+    for (var i = 0; i < names.length; i++) {
+      this.outlines_[names[i]].setAttribute('filter',
+        'url(#' + this.constants_.grayscaleFilterId + ')');
+    }
+  } else {
+    this.svgPath.setAttribute('filter', 'none');
+    var names = Object.keys(this.outlines_);
+    for (var i = 0; i < names.length; i++) {
+      this.outlines_[names[i]].setAttribute('filter', 'none');
+    }
+  }
+};
+
 /**
  * Position the svg connection indicator on the path object
  * @param {number} x The x offset.