diff --git a/Tests/LibWeb/Screenshot/expected/canvas-fillstyle-gradients-ref.html b/Tests/LibWeb/Screenshot/expected/canvas-fillstyle-gradients-ref.html
new file mode 100644
index 00000000000..acc69aa0409
--- /dev/null
+++ b/Tests/LibWeb/Screenshot/expected/canvas-fillstyle-gradients-ref.html
@@ -0,0 +1,10 @@
+<style>
+    * {
+        margin: 0;
+    }
+
+    body {
+        background-color: white;
+    }
+</style>
+<img src="../images/canvas-fillstyle-gradients-ref.png">
diff --git a/Tests/LibWeb/Screenshot/images/canvas-fillstyle-gradients-ref.png b/Tests/LibWeb/Screenshot/images/canvas-fillstyle-gradients-ref.png
new file mode 100644
index 00000000000..d7eca627138
Binary files /dev/null and b/Tests/LibWeb/Screenshot/images/canvas-fillstyle-gradients-ref.png differ
diff --git a/Tests/LibWeb/Screenshot/input/canvas-fillstyle-gradients.html b/Tests/LibWeb/Screenshot/input/canvas-fillstyle-gradients.html
new file mode 100644
index 00000000000..235180b7424
--- /dev/null
+++ b/Tests/LibWeb/Screenshot/input/canvas-fillstyle-gradients.html
@@ -0,0 +1,39 @@
+<link rel="match" href="../expected/canvas-fillstyle-gradients-ref.html" />
+<style>
+   * {
+       margin: 0;
+   }
+
+  body {
+      background-color: white;
+  }
+</style>
+<canvas width=800 height=600 id="canvas"></canvas>
+<script>
+    const canvas = document.getElementById("canvas");
+    const ctx = canvas.getContext("2d");
+
+    // Create a radial gradient
+    // The inner circle is at x=110, y=90, with radius=30
+    // The outer circle is at x=100, y=100, with radius=70
+    let gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);
+
+    gradient.addColorStop(0, "pink");
+    gradient.addColorStop(0.9, "white");
+    gradient.addColorStop(1, "green");
+
+    ctx.fillStyle = gradient;
+    ctx.fillRect(20, 20, 160, 160);
+
+    // Create a linear gradient
+    // The start gradient point is at x=20, y=0
+    // The end gradient point is at x=220, y=0
+    gradient = ctx.createLinearGradient(220, 0, 420, 0);
+
+    gradient.addColorStop(0, "green");
+    gradient.addColorStop(0.5, "cyan");
+    gradient.addColorStop(1, "green");
+
+    ctx.fillStyle = gradient;
+    ctx.fillRect(220, 20, 200, 100);
+</script>