diff --git a/CHANGELOG.md b/CHANGELOG.md
index 98066b6..59e3f20 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 3.5.0
+
+### Features
+
+- Add optional `customHighlightBackground` prop. (#233)
+
 ## 3.4.0
 
 ### Features
diff --git a/README.md b/README.md
index 8618fc3..50d7628 100644
--- a/README.md
+++ b/README.md
@@ -235,6 +235,13 @@ return (
             </td>
             <td><code>true</code></td>
         </tr>
+        <tr>
+            <td><code>customHighlightBackground?: string</code></td>
+            <td>
+                Allows you to override the <code>background-image</code> property of the highlight element, enabling you to fully customize the gradient. See example below.
+            </td>
+            <td><code>undefined</code></td>
+        </tr>
     </tbody>
 </table>
 
@@ -273,6 +280,18 @@ const wrapped2 = (
 );
 ```
 
+### Custom Highlight Background
+
+You may want to make the gradient used in the highlight element narrower or wider. To do this, you can set the `customHighlightBackground` prop. Here's an example of a narrow highlight:
+
+```tsx
+<Skeleton customHighlightBackground="linear-gradient(90deg, var(--base-color) 40%, var(--highlight-color) 50%, var(--base-color) 60%)" />
+```
+
+**If you use this prop, the `baseColor` and `highlightColor` props are ignored,** but you can still reference their corresponding CSS variables as shown in the above example.
+
+![Custom highlight background example](assets/custom-highlight-background.png)
+
 ## Troubleshooting
 
 ### The skeleton width is 0 when the parent has `display: flex`!
diff --git a/assets/custom-highlight-background.png b/assets/custom-highlight-background.png
new file mode 100644
index 0000000..9ae38ec
Binary files /dev/null and b/assets/custom-highlight-background.png differ
diff --git a/package.json b/package.json
index 31f0b66..860e1cc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-loading-skeleton",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Make beautiful, animated loading skeletons that automatically adapt to your app.",
   "keywords": [
     "react",
diff --git a/src/Skeleton.tsx b/src/Skeleton.tsx
index e7c37d9..bf10d70 100644
--- a/src/Skeleton.tsx
+++ b/src/Skeleton.tsx
@@ -18,6 +18,8 @@ function styleOptionsToCssProperties({
   direction,
   duration,
   enableAnimation = defaultEnableAnimation,
+
+  customHighlightBackground,
 }: SkeletonStyleProps & { circle: boolean }): CSSProperties &
   Record<`--${string}`, string> {
   const style: ReturnType<typeof styleOptionsToCssProperties> = {};
@@ -41,6 +43,9 @@ function styleOptionsToCssProperties({
   if (typeof highlightColor !== 'undefined')
     style['--highlight-color'] = highlightColor;
 
+  if (typeof customHighlightBackground === 'string')
+    style['--custom-highlight-background'] = customHighlightBackground;
+
   return style;
 }
 
diff --git a/src/SkeletonStyleProps.ts b/src/SkeletonStyleProps.ts
index 4631386..f504eb3 100644
--- a/src/SkeletonStyleProps.ts
+++ b/src/SkeletonStyleProps.ts
@@ -10,4 +10,6 @@ export interface SkeletonStyleProps {
   duration?: number;
   direction?: 'ltr' | 'rtl';
   enableAnimation?: boolean;
+
+  customHighlightBackground?: string;
 }
diff --git a/src/__stories__/Skeleton.stories.tsx b/src/__stories__/Skeleton.stories.tsx
index 561fdf9..5892fb9 100644
--- a/src/__stories__/Skeleton.stories.tsx
+++ b/src/__stories__/Skeleton.stories.tsx
@@ -427,3 +427,34 @@ export const PrefersReducedMotion = () => (
     />
   </div>
 );
+
+export const HighlightWidth = () => (
+  <div style={{ width: 500 }}>
+    <p>Default</p>
+    <Skeleton
+      highlightColor="#E0B0FF"
+      customHighlightBackground="linear-gradient(90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100%)"
+    />
+    <br />
+
+    <p>Narrow highlight</p>
+    <Skeleton
+      highlightColor="#E0B0FF"
+      customHighlightBackground="linear-gradient(90deg, var(--base-color) 40%, var(--highlight-color) 50%, var(--base-color) 60%)"
+    />
+    <br />
+
+    <p>Wide highlight</p>
+    <Skeleton
+      highlightColor="#E0B0FF"
+      customHighlightBackground="linear-gradient(90deg, var(--base-color) 0%, var(--highlight-color) 5%, var(--highlight-color) 95%, var(--base-color) 100%)"
+    />
+    <br />
+
+    <p>Fun gradient</p>
+    <Skeleton
+      highlightColor="#E0B0FF"
+      customHighlightBackground="linear-gradient(90deg, var(--base-color) 0%, rgba(131,58,180,1) 25%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 75%, var(--base-color) 100%)"
+    />
+  </div>
+);
diff --git a/src/skeleton.css b/src/skeleton.css
index 19270dd..f0c3680 100644
--- a/src/skeleton.css
+++ b/src/skeleton.css
@@ -32,11 +32,14 @@
   right: 0;
   height: 100%;
   background-repeat: no-repeat;
-  background-image: linear-gradient(
-    90deg,
-    var(--base-color),
-    var(--highlight-color),
-    var(--base-color)
+  background-image: var(
+    --custom-highlight-background,
+    linear-gradient(
+      90deg,
+      var(--base-color) 0%,
+      var(--highlight-color) 50%,
+      var(--base-color) 100%
+    )
   );
   transform: translateX(-100%);
 
diff --git a/tsconfig.json b/tsconfig.json
index 49a6903..2ccda84 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,7 @@
     "jsx": "react",
 
     /* Modules */
-    "module": "ESNext",
+    "module": "nodenext",
     "moduleResolution": "nodenext",
 
     /* Emit */