diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts
index 0d003bd21..03a12ed12 100644
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -52,7 +52,7 @@ export const render = async (data4Layout: any, svg: any, element: any, positions
 
     gradient
       .attr('id', 'gradient')
-      .attr('gradientUnits', 'objectBoundingBox')
+      .attr('gradientUnits', 'userSpaceOnUse')
       .attr('spreadMethod', 'pad');
 
     gradient
@@ -63,32 +63,32 @@ export const render = async (data4Layout: any, svg: any, element: any, positions
 
     gradient
       .append('svg:stop')
-      .attr('offset', '75%')
+      .attr('offset', '10%')
       .attr('stop-color', gradientStop)
       .attr('stop-opacity', 1);
 
-    // gradient
-    //   .append('svg:stop')
-    //   .attr('offset', '20%')
-    //   .attr('stop-color', gradientStart)
-    //   .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', '30%')
-    //   .attr('stop-color', gradientStop)
-    //   .attr('stop-opacity', 1);
-    // gradient
-    //   .append('svg:stop')
-    //   .attr('offset', '40%')
-    //   .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', '50%')
-    //   .attr('stop-color', gradientStop)
-    //   .attr('stop-opacity', 1);
+    gradient
+      .append('svg:stop')
+      .attr('offset', '80%')
+      .attr('stop-color', gradientStop)
+      .attr('stop-opacity', 1);
   }
   return layoutRenderer.render(data4Layout, svg, element, layoutDefinition.algorithm, positions);
 };
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index 59779b3c8..48d09c6e0 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -93,7 +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)';
+    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 53f5ee62c..2be7091c5 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -120,7 +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.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 52bcc97af..77a79e5db 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -96,7 +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)';
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,0.5))';
   }
   updateColors() {
     /* Sequence Diagram variables */
diff --git a/packages/mermaid/src/themes/theme-neo-dark.js b/packages/mermaid/src/themes/theme-neo-dark.js
index c93d636dc..53a659a30 100644
--- a/packages/mermaid/src/themes/theme-neo-dark.js
+++ b/packages/mermaid/src/themes/theme-neo-dark.js
@@ -52,7 +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)';
+    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 a83260f68..0ea15c5bc 100644
--- a/packages/mermaid/src/themes/theme-neo.js
+++ b/packages/mermaid/src/themes/theme-neo.js
@@ -33,7 +33,7 @@ class Theme {
     this.useGradient = true;
     this.gradientStart = '#eb0042';
     this.gradientStop = '#0042eb';
-    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1)';
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
     this.tertiaryColor = '#ffffff';
   }
   updateColors() {
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index b9f78e35f..f9e0c032f 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -107,7 +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)';
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
   }
   updateColors() {
     this.secondBkg = lighten(this.contrast, 55);