diff --git a/package-lock.json b/package-lock.json
index 12e87fb1..04b97b1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -175,9 +175,9 @@
       "integrity": "sha1-HOsxA81mixZWO1SSwGkMPwkcdJE="
     },
     "@mapbox/mapbox-gl-style-spec": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-10.1.0.tgz",
-      "integrity": "sha512-1thxPjeTEWacy0U2dRNgkPDMT+q42Zei3aaWDa2BRu6ehqLguB01+eyPRWQTh0cpVtZbzPy9MEne28mILLPpvQ==",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-11.1.1.tgz",
+      "integrity": "sha512-4l/q05NO26u2HmkjIKpFsMs2Ed56wd+w9nC8pXAVVsBZBG+LHwynJZyg6Ijy/6gLyp+nnmLFtzkXFfneuFCIjw==",
       "requires": {
         "@mapbox/unitbezier": "0.0.0",
         "brfs": "1.4.3",
@@ -185,7 +185,6 @@
         "csscolorparser": "1.0.3",
         "in-publish": "2.0.0",
         "jsonlint-lines-primitives": "1.6.0",
-        "lodash.isequal": "3.0.4",
         "minimist": "0.0.8",
         "rw": "1.3.3",
         "sort-object": "0.3.2",
@@ -200,15 +199,6 @@
             "JSV": "4.0.2",
             "nomnom": "1.8.1"
           }
-        },
-        "lodash.isequal": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-3.0.4.tgz",
-          "integrity": "sha1-HDXrO27wzR/1F0Pj6jz3/f/ay2Q=",
-          "requires": {
-            "lodash._baseisequal": "3.0.7",
-            "lodash._bindcallback": "3.0.1"
-          }
         }
       }
     },
@@ -7831,9 +7821,9 @@
       "dev": true
     },
     "mapbox-gl": {
-      "version": "0.44.0",
-      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-0.44.0.tgz",
-      "integrity": "sha512-vMeZaLXjG1B1BKOD9HB11sb9UIUvbzXWJu0NR38j9Uyp1h5xUXqh1Rqe+EhxQp3jzlHIv/LVhFKCJjQQKA2LoA==",
+      "version": "0.44.1",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-0.44.1.tgz",
+      "integrity": "sha512-K6GfXfvumPgiw3NSFGTPYU7VinhWLKFbRmNTx/mPWzxzazfKZsChuyZ9IEhZ6LuFEnV1qzquyg5kLUCledVzvg==",
       "requires": {
         "@mapbox/gl-matrix": "0.0.1",
         "@mapbox/mapbox-gl-supported": "1.3.0",
diff --git a/package.json b/package.json
index 2c2b74f6..5e1e3a16 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
     "@mapbox/mapbox-gl-rtl-text": "^0.1.1",
-    "@mapbox/mapbox-gl-style-spec": "^10.0.1",
+    "@mapbox/mapbox-gl-style-spec": "^11.1.1",
     "classnames": "^2.2.5",
     "codemirror": "^5.32.0",
     "color": "^2.0.0",
@@ -33,7 +33,7 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^0.44.0",
+    "mapbox-gl": "^0.44.1",
     "mapbox-gl-inspect": "^1.2.6",
     "maputnik-design": "github:maputnik/design",
     "mousetrap": "^1.6.1",
diff --git a/src/components/icons/LayerIcon.jsx b/src/components/icons/LayerIcon.jsx
index 790ca3ad..a69c616f 100644
--- a/src/components/icons/LayerIcon.jsx
+++ b/src/components/icons/LayerIcon.jsx
@@ -18,6 +18,7 @@ class LayerIcon extends React.Component {
     switch(this.props.type) {
       case 'fill-extrusion': return <BackgroundIcon {...iconProps} />
       case 'raster': return <FillIcon {...iconProps} />
+      case 'hillshade': return <FillIcon {...iconProps} />
       case 'fill': return <FillIcon {...iconProps} />
       case 'background': return <BackgroundIcon {...iconProps} />
       case 'line': return <LineIcon {...iconProps} />
diff --git a/src/components/layers/LayerTypeBlock.jsx b/src/components/layers/LayerTypeBlock.jsx
index ee1722d2..663b4fe0 100644
--- a/src/components/layers/LayerTypeBlock.jsx
+++ b/src/components/layers/LayerTypeBlock.jsx
@@ -22,6 +22,7 @@ class LayerTypeBlock extends React.Component {
           ['raster', 'Raster'],
           ['circle', 'Circle'],
           ['fill-extrusion', 'Fill Extrusion'],
+          ['hillshade', 'Hillshade'],
         ]}
         onChange={this.props.onChange}
         value={this.props.value}
diff --git a/src/components/modals/AddModal.jsx b/src/components/modals/AddModal.jsx
index 910b0858..be7b02ba 100644
--- a/src/components/modals/AddModal.jsx
+++ b/src/components/modals/AddModal.jsx
@@ -136,7 +136,7 @@ class AddModal extends React.Component {
         onChange={v => this.setState({ source: v })}
       />
       }
-      {this.state.type !== 'background' && this.state.type !== 'raster' &&
+      {this.state.type !== 'background' && this.state.type !== 'raster' && this.state.type !== 'hillshade' &&
       <LayerSourceLayerBlock
         isFixed={true}
         sourceLayerIds={layers}
diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx
index 1ea30e1f..0a2e1c23 100644
--- a/src/components/modals/SourcesModal.jsx
+++ b/src/components/modals/SourcesModal.jsx
@@ -45,6 +45,10 @@ function editorMode(source) {
     if(source.tiles) return 'tilexyz_raster'
     return 'tilejson_raster'
   }
+  if(source.type === 'raster-dem') {
+    if(source.tiles) return 'tilexyz_raster-dem'
+    return 'tilejson_raster-dem'
+  }
   if(source.type === 'vector') {
     if(source.tiles) return 'tilexyz_vector'
     return 'tilejson_vector'
@@ -127,6 +131,16 @@ class AddSource extends React.Component {
         minzoom: source.minzoom || 0,
         maxzoom: source.maxzoom || 14
       }
+      case 'tilejson_raster-dem': return {
+        type: 'raster',
+        url: source.url || 'http://localhost:3000/tilejson.json'
+      }
+      case 'tilexyz_raster-dem': return {
+        type: 'raster',
+        tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'],
+        minzoom: source.minzoom || 0,
+        maxzoom: source.maxzoom || 14
+      }
       default: return {}
     }
   }
@@ -147,6 +161,8 @@ class AddSource extends React.Component {
             ['tilexyz_vector', 'Vector (XYZ URLs)'],
             ['tilejson_raster', 'Raster (TileJSON URL)'],
             ['tilexyz_raster', 'Raster (XYZ URL)'],
+            ['tilejson_raster-dem', 'Raster DEM (TileJSON URL)'],
+            ['tilexyz_raster-dem', 'Raster DEM (XYZ URLs)'],
           ]}
           onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
           value={this.state.mode}
diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx
index 33259382..e415feac 100644
--- a/src/components/sources/SourceTypeEditor.jsx
+++ b/src/components/sources/SourceTypeEditor.jsx
@@ -115,6 +115,8 @@ class SourceTypeEditor extends React.Component {
       case 'tilexyz_vector': return <TileURLSourceEditor {...commonProps} />
       case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />
       case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
+      case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
+      case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps} />
       default: return null
     }
   }
diff --git a/src/config/layout.json b/src/config/layout.json
index 4297146b..3e041ffc 100644
--- a/src/config/layout.json
+++ b/src/config/layout.json
@@ -194,5 +194,21 @@
           ]
         }
       ]
+    },
+    "hillshade": {
+      "groups": [
+        {
+          "title": "Paint properties",
+          "type": "properties",
+          "fields": [
+            "hillshade-illumination-direction",
+            "hillshade-illumination-anchor",
+            "hillshade-exaggeration",
+            "hillshade-shadow-color",
+            "hillshade-highlight-color",
+            "hillshade-accent-color"
+          ]
+        }
+      ]
     }
 }