diff --git a/README.md b/README.md
index c12e63e511..4b15adc545 100644
--- a/README.md
+++ b/README.md
@@ -1075,6 +1075,7 @@ We recognize all types of contributions. This project follows the [all-contribut
       <td align="center" valign="top" width="16.66%"><a href="http://alexhennings.dev"><img src="https://avatars.githubusercontent.com/u/31355456?v=4?s=120" width="120px;" alt="blackboxlogic"/><br /><sub><b>blackboxlogic</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=blackboxlogic" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="16.66%"><a href="https://github.com/zs-5"><img src="https://avatars.githubusercontent.com/u/177980470?v=4?s=120" width="120px;" alt="ℤ"/><br /><sub><b>ℤ</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=zs-5" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="16.66%"><a href="https://github.com/Dhanush111"><img src="https://avatars.githubusercontent.com/u/51503598?v=4?s=120" width="120px;" alt="dhanush"/><br /><sub><b>dhanush</b></sub></a><br /><a href="https://github.com/processing/p5.js/commits?author=Dhanush111" title="Documentation">📖</a></td>
+
       <td align="center" valign="top" width="16.66%"><a href="http://caad.xyz"><img src="https://avatars.githubusercontent.com/u/5458532?v=4?s=120" width="120px;" alt="ma haidong"/><br /><sub><b>ma haidong</b></sub></a><br /><a href="https://github.com/processing/p5.js/issues?q=author%3Amahaidong" title="Bug reports">🐛</a> <a href="https://github.com/processing/p5.js/commits?author=mahaidong" title="Code">💻</a></td>
       <td align="center" valign="top" width="16.66%"><a href="https://github.com/Rishab87"><img src="https://avatars.githubusercontent.com/u/138858208?v=4?s=120" width="120px;" alt="Rishab Kumar Jha"/><br /><sub><b>Rishab Kumar Jha</b></sub></a><br /><a href="https://github.com/processing/p5.js/issues?q=author%3ARishab87" title="Bug reports">🐛</a> <a href="https://github.com/processing/p5.js/commits?author=Rishab87" title="Code">💻</a></td>
     </tr>
diff --git a/package-lock.json b/package-lock.json
index 7cd922865b..e0782427e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3921,9 +3921,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001549",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001549.tgz",
-      "integrity": "sha512-qRp48dPYSCYaP+KurZLhDYdVE+yEyht/3NlmcJgVQ2VMGt6JL36ndQ/7rgspdZsJuxDPFIo/OzBT2+GmIJ53BA==",
+      "version": "1.0.30001683",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001683.tgz",
+      "integrity": "sha512-iqmNnThZ0n70mNwvxpEC2nBJ037ZHZUoBI5Gorh1Mw6IlEAZujEoU1tXA628iZfzm7R9FvFzxbfdgml82a3k8Q==",
       "dev": true,
       "funding": [
         {
@@ -3938,7 +3938,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/chai": {
       "version": "3.5.0",
diff --git a/package.json b/package.json
index 44d91bdb0f..d0f9b77097 100644
--- a/package.json
+++ b/package.json
@@ -143,5 +143,6 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
-  }
+  },
+  "packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
 }
diff --git a/src/color/p5.Color.js b/src/color/p5.Color.js
index 5dee81c61d..7167f45bb6 100644
--- a/src/color/p5.Color.js
+++ b/src/color/p5.Color.js
@@ -835,6 +835,31 @@ p5.Color = class Color {
       return this.hsla[1] * this.maxes[constants.HSL][1];
     }
   }
+
+  //Added the gradients for color
+  _generateGradient() {
+    const hue = this._getHue(); // Fetch hue
+    const lightness = this._getLightness(); // Fetch lightness
+
+    // Adjust properties for variation
+    const startLightness = Math.max(0, lightness - 20); // Darker start
+    const endLightness = Math.min(100, lightness + 20); // Lighter end
+
+    // Generate color stops
+    const startColor = `hsl(${hue}, 80%, ${startLightness}%)`;
+    const endColor = `hsl(${hue}, 80%, ${endLightness}%)`;
+
+    // Create linear gradient
+    return `linear-gradient(90deg, ${startColor}, ${endColor})`;
+  }
+
+  // Usage: Apply the gradient to an element
+  applyGradient(element) {
+    const gradient = this._generateGradient();
+    element.style.background = gradient;
+  }
+
+  //end of gradient logic
   /**
  * For a number of different inputs, returns a color formatted as [r, g, b, a]
  * arrays, with each component normalized between 0 and 1.