diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts
index 4c76e7100..bdcdcd0ff 100644
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -72,6 +72,19 @@ export const render = async (data4Layout: LayoutData, svg: SVG, positions?: any)
     .attr('flood-opacity', '0.06')
     .attr('flood-color', '#000000');
 
+  svg
+    .append('defs')
+    .append('filter')
+    .attr('id', 'drop-shadow-small')
+    .attr('height', '150%')
+    .attr('width', '150%')
+    .append('feDropShadow')
+    .attr('dx', '2')
+    .attr('dy', '2')
+    .attr('stdDeviation', 0)
+    .attr('flood-opacity', '0.06')
+    .attr('flood-color', '#000000');
+
   if (useGradient) {
     const gradient = svg
       .append('linearGradient')
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
index 31a9fe1a7..6173f614f 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
@@ -61,6 +61,10 @@ export function filledCircle<T extends SVGGraphicsElement>(
     filledCircle.attr('class', 'outer-path');
   }
 
+  if (node.width < 25) {
+    filledCircle.attr('style', 'filter:url(#drop-shadow-small)');
+  }
+
   if (cssStyles && cssStyles.length > 0 && node.look !== 'handDrawn') {
     filledCircle.selectAll('path').attr('style', cssStyles);
   }
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
index 1a7477c95..e9c0a0f70 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
@@ -80,6 +80,10 @@ export function stateEnd<T extends SVGGraphicsElement>(
     circle.selectAll('path').attr('style', nodeStyles);
   }
 
+  if (node.width < 25) {
+    circle.attr('style', 'filter:url(#drop-shadow-small)');
+  }
+
   updateNodeBounds(node, circle);
 
   node.intersect = function (point) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
index 6d433d10b..b2360131c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
@@ -62,6 +62,10 @@ export function stateStart<T extends SVGGraphicsElement>(
       .attr('height', node.height ?? 14);
   }
 
+  if (node.width < 25) {
+    circle.attr('style', 'filter:url(#drop-shadow-small)');
+  }
+
   updateNodeBounds(node, circle);
 
   node.intersect = function (point) {