You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {}
  • Firefox
  • Safari
  • undefined

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample shows how the multiply blend mode is used to blend layers in a basemap to allow the hillshade layer peak through the top layer of the basemap.

Blend modes define how layers should blend together to create an interesting effect in a layer, or even to produce what seems like a new layer. Unlike using transparency, which can result in a washed-out top layer, blend modes create a variety of vibrant and intriguing results by blending a layer with the layers below it.

This sample displays a community style vector tiles layer over the world hillshade layer. Both layers are added as part of the map's basemap.

If the layers were added without multiply blend mode applied to the vector tile layer then then map would look like the following: layer-blendmode

If opacity (0.7) is set on the vector tile layer, then the map would look like the following. You can see the hillshade show through the top layer. However, the opacity washes out the top layer.


// Multiply blend mode emphasizes the darkest parts of overlapping layers
// by multiplying colors of the top layer and the background layer.
// This blend mode is useful to have the hillshades to show through the top layer.
var map = new Map({
  basemap: {
      new TileLayer({
        portalItem: {
          id: "1b243539f4514b6ba35e7d995890db1d" // world hillshade
      new VectorTileLayer({
        portalItem: {
          id: "273bf8d5c8ac400183fc24e109d20bcf" // community style vector tiles
        blendMode: "multiply"

Sample search results