diff --git a/README.md b/README.md
index 6290869f..0152c721 100644
--- a/README.md
+++ b/README.md
@@ -93,23 +93,27 @@ const chartConfig = {
 };
 ```
 
-| Property                      | Type               | Description                                                                                            |
-| ----------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------ |
-| backgroundGradientFrom        | string             | Defines the first color in the linear gradient of a chart's background                                 |
-| backgroundGradientFromOpacity | Number             | Defines the first color opacity in the linear gradient of a chart's background                         |
-| backgroundGradientTo          | string             | Defines the second color in the linear gradient of a chart's background                                |
-| backgroundGradientToOpacity   | Number             | Defines the second color opacity in the linear gradient of a chart's background                        |
-| fillShadowGradient            | string             | Defines the color of the area under data                                                               |
-| fillShadowGradientOpacity     | Number             | Defines the initial opacity of the area under data                                                     |
-| useShadowColorFromDataset     | Boolean            | Defines the option to use color from dataset to each chart data. Default is false                      |
-| color                         | function => string | Defines the base color function that is used to calculate colors of labels and sectors used in a chart |
-| strokeWidth                   | Number             | Defines the base stroke width in a chart                                                               |
-| barPercentage                 | Number             | Defines the percent (0-1) of the available width each bar width in a chart                             |
-| barRadius                     | Number             | Defines the radius of each bar                                                                         |
-| propsForBackgroundLines       | props              | Override styles of the background lines, refer to react-native-svg's Line documentation                |
-| propsForLabels                | props              | Override styles of the labels, refer to react-native-svg's Text documentation                          |
-| propsForVerticalLabels        | props              | Override styles of vertical labels, refer to react-native-svg's Text documentation                     |
-| propsForHorizontalLabels      | props              | Override styles of horizontal labels, refer to react-native-svg's Text documentation                   |
+| Property                      | Type               | Description                                                                                                                          |
+| ----------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
+| backgroundGradientFrom        | string             | Defines the first color in the linear gradient of a chart's background                                                               |
+| backgroundGradientFromOpacity | Number             | Defines the first color opacity in the linear gradient of a chart's background                                                       |
+| backgroundGradientTo          | string             | Defines the second color in the linear gradient of a chart's background                                                              |
+| backgroundGradientToOpacity   | Number             | Defines the second color opacity in the linear gradient of a chart's background                                                      |
+| fillShadowGradientFrom        | string             | Defines the first color in the linear gradient of the area under data (can also be specified as `fillShadowGradient`)                |
+| fillShadowGradientFromOpacity | Number             | Defines the first color opacity in the linear gradient of the area under data (can also be specified as `fillShadowGradientOpacity`) |
+| fillShadowGradientFromOffset  | Number             | Defines the first color offset (0-1) in the linear gradient of the area under data                                                   |
+| fillShadowGradientTo          | string             | Defines the second color in the linear gradient of the area under data                                                               |
+| fillShadowGradientToOpacity   | Number             | Defines the second color opacity in the linear gradient of the area under data                                                       |
+| fillShadowGradientToOffset    | Number             | Defines the second color offset (0-1) in the linear gradient of the area under data                                                  |
+| useShadowColorFromDataset     | Boolean            | Defines the option to use color from dataset to each chart data. Default is false                                                    |
+| color                         | function => string | Defines the base color function that is used to calculate colors of labels and sectors used in a chart                               |
+| strokeWidth                   | Number             | Defines the base stroke width in a chart                                                                                             |
+| barPercentage                 | Number             | Defines the percent (0-1) of the available width each bar width in a chart                                                           |
+| barRadius                     | Number             | Defines the radius of each bar                                                                                                       |
+| propsForBackgroundLines       | props              | Override styles of the background lines, refer to react-native-svg's Line documentation                                              |
+| propsForLabels                | props              | Override styles of the labels, refer to react-native-svg's Text documentation                                                        |
+| propsForVerticalLabels        | props              | Override styles of vertical labels, refer to react-native-svg's Text documentation                                                   |
+| propsForHorizontalLabels      | props              | Override styles of horizontal labels, refer to react-native-svg's Text documentation                                                 |
 
 ## Responsive charts
 
diff --git a/package.json b/package.json
index 611973d1..bbb9775d 100644
--- a/package.json
+++ b/package.json
@@ -66,5 +66,8 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/indiespirit/react-native-chart-kit"
+  },
+  "resolutions": {
+    "@types/react": "16.14.8"
   }
-}
\ No newline at end of file
+}
diff --git a/src/AbstractChart.tsx b/src/AbstractChart.tsx
index 612ffdfb..e426b403 100644
--- a/src/AbstractChart.tsx
+++ b/src/AbstractChart.tsx
@@ -378,6 +378,12 @@ class AbstractChart<
         | "backgroundGradientToOpacity"
         | "fillShadowGradient"
         | "fillShadowGradientOpacity"
+        | "fillShadowGradientFrom"
+        | "fillShadowGradientFromOpacity"
+        | "fillShadowGradientFromOffset"
+        | "fillShadowGradientTo"
+        | "fillShadowGradientToOpacity"
+        | "fillShadowGradientToOffset"
       >,
       | "width"
       | "height"
@@ -389,6 +395,12 @@ class AbstractChart<
       | "backgroundGradientToOpacity"
       | "fillShadowGradient"
       | "fillShadowGradientOpacity"
+      | "fillShadowGradientFrom"
+      | "fillShadowGradientFromOpacity"
+      | "fillShadowGradientFromOffset"
+      | "fillShadowGradientTo"
+      | "fillShadowGradientToOpacity"
+      | "fillShadowGradientToOffset"
     >
   ) => {
     const {
@@ -417,6 +429,40 @@ class AbstractChart<
       ? config.fillShadowGradientOpacity
       : 0.1;
 
+    const fillShadowGradientFrom = config.hasOwnProperty(
+      "fillShadowGradientFrom"
+    )
+      ? config.fillShadowGradientFrom
+      : fillShadowGradient;
+
+    const fillShadowGradientFromOpacity = config.hasOwnProperty(
+      "fillShadowGradientFromOpacity"
+    )
+      ? config.fillShadowGradientFromOpacity
+      : fillShadowGradientOpacity;
+
+    const fillShadowGradientFromOffset = config.hasOwnProperty(
+      "fillShadowGradientFromOffset"
+    )
+      ? config.fillShadowGradientFromOffset
+      : 0;
+
+    const fillShadowGradientTo = config.hasOwnProperty("fillShadowGradientTo")
+      ? config.fillShadowGradientTo
+      : this.props.chartConfig.color(1.0);
+
+    const fillShadowGradientToOpacity = config.hasOwnProperty(
+      "fillShadowGradientToOpacity"
+    )
+      ? config.fillShadowGradientToOpacity
+      : 0.1;
+
+    const fillShadowGradientToOffset = config.hasOwnProperty(
+      "fillShadowGradientToOffset"
+    )
+      ? config.fillShadowGradientToOffset
+      : 1;
+
     return (
       <Defs>
         <LinearGradient
@@ -441,7 +487,7 @@ class AbstractChart<
         {useShadowColorFromDataset ? (
           data.map((dataset, index) => (
             <LinearGradient
-              id={`fillShadowGradient_${index}`}
+              id={`fillShadowGradientFrom_${index}`}
               key={`${index}`}
               x1={0}
               y1={0}
@@ -450,26 +496,26 @@ class AbstractChart<
               gradientUnits="userSpaceOnUse"
             >
               <Stop
-                offset="0"
+                offset={fillShadowGradientFromOffset}
                 stopColor={
-                  dataset.color ? dataset.color(1.0) : fillShadowGradient
+                  dataset.color ? dataset.color(1.0) : fillShadowGradientFrom
                 }
-                stopOpacity={fillShadowGradientOpacity}
+                stopOpacity={fillShadowGradientFromOpacity}
               />
               <Stop
-                offset="1"
+                offset={fillShadowGradientToOffset}
                 stopColor={
                   dataset.color
-                    ? dataset.color(fillShadowGradientOpacity)
-                    : fillShadowGradient
+                    ? dataset.color(fillShadowGradientFromOpacity)
+                    : fillShadowGradientFrom
                 }
-                stopOpacity="0"
+                stopOpacity={fillShadowGradientToOpacity || 0}
               />
             </LinearGradient>
           ))
         ) : (
           <LinearGradient
-            id="fillShadowGradient"
+            id="fillShadowGradientFrom"
             x1={0}
             y1={0}
             x2={0}
@@ -477,11 +523,15 @@ class AbstractChart<
             gradientUnits="userSpaceOnUse"
           >
             <Stop
-              offset="0"
-              stopColor={fillShadowGradient}
-              stopOpacity={fillShadowGradientOpacity}
+              offset={fillShadowGradientFromOffset}
+              stopColor={fillShadowGradientFrom}
+              stopOpacity={fillShadowGradientFromOpacity}
+            />
+            <Stop
+              offset={fillShadowGradientToOffset}
+              stopColor={fillShadowGradientTo || fillShadowGradientFrom}
+              stopOpacity={fillShadowGradientToOpacity || 0}
             />
-            <Stop offset="1" stopColor={fillShadowGradient} stopOpacity="0" />
           </LinearGradient>
         )}
       </Defs>
diff --git a/src/BarChart.tsx b/src/BarChart.tsx
index 4f2508fd..04ebb37f 100644
--- a/src/BarChart.tsx
+++ b/src/BarChart.tsx
@@ -94,7 +94,7 @@ class BarChart extends AbstractChart<BarChartProps, BarChartState> {
           fill={
             withCustomBarColorFromData
               ? `url(#customColor_0_${i})`
-              : "url(#fillShadowGradient)"
+              : "url(#fillShadowGradientFrom)"
           }
         />
       );
diff --git a/src/HelperTypes.ts b/src/HelperTypes.ts
index 6bec6e4d..0d5dde32 100644
--- a/src/HelperTypes.ts
+++ b/src/HelperTypes.ts
@@ -54,8 +54,35 @@ export interface ChartConfig {
    * Defines the second color opacity in the linear gradient of a chart's background
    */
   backgroundGradientToOpacity?: number;
+  /**
+   * Defines the previous options to maintain backwards compatibility
+   */
   fillShadowGradient?: string;
   fillShadowGradientOpacity?: number;
+  /**
+   * Defines the first color in the linear gradient of the area under data
+   */
+  fillShadowGradientFrom?: string;
+  /**
+   * Defines the first color opacity in the linear gradient of the area under data
+   */
+  fillShadowGradientFromOpacity?: number;
+  /**
+   * Defines the first color offset in the linear gradient of the area under data
+   */
+  fillShadowGradientFromOffset?: number;
+  /**
+   * Defines the second color in the linear gradient of the area under data
+   */
+  fillShadowGradientTo?: string;
+  /**
+   * Defines the second color opacity in the linear gradient of the area under data
+   */
+  fillShadowGradientToOpacity?: number;
+  /**
+   * Defines the second color offset in the linear gradient of the area under data
+   */
+  fillShadowGradientToOffset?: number;
   /**
    * Defines the option to use color from dataset to each chart data
    */
diff --git a/src/line-chart/LineChart.tsx b/src/line-chart/LineChart.tsx
index 3b7a5a90..dc4754b5 100644
--- a/src/line-chart/LineChart.tsx
+++ b/src/line-chart/LineChart.tsx
@@ -584,7 +584,7 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
                 (dataset.data.length - 1)},${(height / 4) * 3 +
               paddingTop} ${paddingRight},${(height / 4) * 3 + paddingTop}`
           }
-          fill={`url(#fillShadowGradient${
+          fill={`url(#fillShadowGradientFrom${
             useColorFromDataset ? `_${index}` : ""
           })`}
           strokeWidth={0}
@@ -761,7 +761,7 @@ class LineChart extends AbstractChart<LineChartProps, LineChartState> {
         <Path
           key={index}
           d={d}
-          fill={`url(#fillShadowGradient${
+          fill={`url(#fillShadowGradientFrom${
             useColorFromDataset ? `_${index}` : ""
           })`}
           strokeWidth={0}