diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js
index 06c2b2c51..371b56b02 100644
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/packages/mermaid/src/diagrams/state/styles.js
@@ -174,7 +174,7 @@ g.stateGroup line {
 
 
 .state-shadow-neo {
-  filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
+  filter: ${options.dropShadow} );
 }
 
 
diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts
index b3e22fe08..03a12ed12 100644
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -63,7 +63,30 @@ export const render = async (data4Layout: any, svg: any, element: any, positions
 
     gradient
       .append('svg:stop')
-      .attr('offset', '100%')
+      .attr('offset', '10%')
+      .attr('stop-color', gradientStop)
+      .attr('stop-opacity', 1);
+
+    gradient
+      .append('svg:stop')
+      .attr('offset', '30%')
+      .attr('stop-color', gradientStart)
+      .attr('stop-opacity', 1);
+
+    gradient
+      .append('svg:stop')
+      .attr('offset', '35%')
+      .attr('stop-color', gradientStop)
+      .attr('stop-opacity', 1);
+    gradient
+      .append('svg:stop')
+      .attr('offset', '60%')
+      .attr('stop-color', gradientStart)
+      .attr('stop-opacity', 1);
+
+    gradient
+      .append('svg:stop')
+      .attr('offset', '80%')
       .attr('stop-color', gradientStop)
       .attr('stop-opacity', 1);
   }
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index c1e624e69..19d3d91e4 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -17,7 +17,11 @@ const rect = (parent, node) => {
   const { clusterBkg, clusterBorder } = themeVariables;
 
   // Add outer g element
-  const shapeSvg = parent.insert('g').attr('class', 'cluster').attr('id', node.id);
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', 'cluster')
+    .attr('id', node.id)
+    .attr('data-look', node.look);
 
   const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
 
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 00354dba7..f50fdff99 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -14,6 +14,7 @@ const getStyles = (
     errorBkgColor: string;
     errorTextColor: string;
     lineColor: string;
+    useGradient: boolean;
   } & FlowChartStyleOptions
 ) => {
   let diagramStyles = '';
@@ -73,35 +74,26 @@ const getStyles = (
     stroke: ${options.nodeBorder};
   }
 
-  [data-look="neo"].node rect, [data-look="neo"].node polygon {
-    //stroke: none;
+  [data-look="neo"].node rect, [data-look="neo"].cluster rect, [data-look="neo"].node polygon {
     stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
-    filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
-    // rx: 3;
-    // ry: 3;
+    filter: ${options.dropShadow} );
   }
 
   [data-look="neo"].node rect,  [data-look="neo"].node circle, [data-look="neo"].node polygon {
-    //stroke: $(options.nodeBorder);
     stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
-    filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
-    // rx: 3;
-    // ry: 3;
+    filter: ${options.dropShadow} );
   }
 
   [data-look="neo"].node circle{
     stroke: $(options.nodeBorder);
     stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
-    filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
-    //fill: #000000;
-    // rx: 3;
-    // ry: 3;
+
+    filter: ${options.dropShadow} );
   }
 
   [data-look="neo"].node circle .state-start{
-   
     fill: #000000;
-    
+
   }
 
   [data-look="neo"].statediagram-cluster rect {
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index ce7bdc6b1..437aba467 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -26,6 +26,7 @@ class Theme {
     this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
     this.fontSize = '16px';
     this.useGradient = true;
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1)';
   }
   updateColors() {
     // The || is to make sure that if the variable has been defined by a user override that value is to be used
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index 8defaf034..48d09c6e0 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -93,6 +93,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = this.primaryBorderColor;
     this.gradientStop = this.secondaryBorderColor;
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
   }
   updateColors() {
     this.secondBkg = lighten(this.mainBkg, 16);
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index ad8303856..2be7091c5 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -120,6 +120,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = this.primaryBorderColor;
     this.gradientStop = this.secondaryBorderColor;
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
     this.updateColors();
   }
   updateColors() {
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 7a548a864..77a79e5db 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -96,6 +96,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = this.primaryBorderColor;
     this.gradientStop = this.secondaryBorderColor;
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,0.5))';
   }
   updateColors() {
     /* Sequence Diagram variables */
@@ -342,8 +343,6 @@ class Theme {
     this.attributeBackgroundColorEven =
       this.attributeBackgroundColorEven || oldAttributeBackgroundColorEven;
     /* -------------------------------------------------- */
-
-    this.useGradient = true;
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {
diff --git a/packages/mermaid/src/themes/theme-neo-dark.js b/packages/mermaid/src/themes/theme-neo-dark.js
index b1166b13c..53a659a30 100644
--- a/packages/mermaid/src/themes/theme-neo-dark.js
+++ b/packages/mermaid/src/themes/theme-neo-dark.js
@@ -23,7 +23,7 @@ class Theme {
     this.secondaryTextColor = invert(this.secondaryColor);
     this.tertiaryTextColor = invert(this.tertiaryColor);
 
-    this.mainBkg = '#1f2020';
+    this.mainBkg = '#2a2020';
     this.secondBkg = 'calculated';
     this.mainContrastColor = 'lightgrey';
     this.darkTextColor = lighten(invert('#323D47'), 10);
@@ -52,6 +52,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = '#eb0042';
     this.gradientStop = '#0042eb';
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,0.5))';
   }
   updateColors() {
     // The || is to make sure that if the variable has been defined by a user override that value is to be used
diff --git a/packages/mermaid/src/themes/theme-neo.js b/packages/mermaid/src/themes/theme-neo.js
index 6c7f51620..0ea15c5bc 100644
--- a/packages/mermaid/src/themes/theme-neo.js
+++ b/packages/mermaid/src/themes/theme-neo.js
@@ -33,6 +33,8 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = '#eb0042';
     this.gradientStop = '#0042eb';
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
+    this.tertiaryColor = '#ffffff';
   }
   updateColors() {
     // The || is to make sure that if the variable has been defined by a user override that value is to be used
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index cdc5c6944..f9e0c032f 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -107,6 +107,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = this.primaryBorderColor;
     this.gradientStop = this.secondaryBorderColor;
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
   }
   updateColors() {
     this.secondBkg = lighten(this.contrast, 55);