diff --git a/es-core/src/ThemeData.cpp b/es-core/src/ThemeData.cpp
index 14630fb8a..f4efbcfff 100644
--- a/es-core/src/ThemeData.cpp
+++ b/es-core/src/ThemeData.cpp
@@ -361,6 +361,9 @@ std::map<std::string, std::map<std::string, ThemeData::ElementPropertyType>>
        {"speed", FLOAT},
        {"direction", STRING},
        {"interpolation", STRING},
+       {"color", COLOR},
+       {"colorEnd", COLOR},
+       {"gradientType", STRING},
        {"brightness", FLOAT},
        {"opacity", FLOAT},
        {"saturation", FLOAT},
diff --git a/es-core/src/components/GIFAnimComponent.cpp b/es-core/src/components/GIFAnimComponent.cpp
index 2a121e358..8c9c3f46f 100644
--- a/es-core/src/components/GIFAnimComponent.cpp
+++ b/es-core/src/components/GIFAnimComponent.cpp
@@ -43,6 +43,9 @@ GIFAnimComponent::GIFAnimComponent()
     , mExternalPause {false}
     , mAlternate {false}
     , mTargetIsMax {false}
+    , mColorShift {0xFFFFFFFF}
+    , mColorShiftEnd {0xFFFFFFFF}
+    , mColorGradientHorizontal {true}
 {
     // Get an empty texture for rendering the animation.
     mTexture = TextureResource::get("");
@@ -359,6 +362,30 @@ void GIFAnimComponent::applyTheme(const std::shared_ptr<ThemeData>& theme,
         }
     }
 
+    if (properties & COLOR) {
+        if (elem->has("color")) {
+            mColorShift = elem->get<unsigned int>("color");
+            mColorShiftEnd = mColorShift;
+        }
+        if (elem->has("colorEnd"))
+            mColorShiftEnd = elem->get<unsigned int>("colorEnd");
+        if (elem->has("gradientType")) {
+            const std::string& gradientType {elem->get<std::string>("gradientType")};
+            if (gradientType == "horizontal") {
+                mColorGradientHorizontal = true;
+            }
+            else if (gradientType == "vertical") {
+                mColorGradientHorizontal = false;
+            }
+            else {
+                mColorGradientHorizontal = true;
+                LOG(LogWarning) << "GIFAnimComponent: Invalid theme configuration, property "
+                                   "\"gradientType\" for element \""
+                                << element.substr(10) << "\" defined as \"" << gradientType << "\"";
+            }
+        }
+    }
+
     if (elem->has("path"))
         setAnimation(elem->get<std::string>("path"));
 }
@@ -512,10 +539,10 @@ void GIFAnimComponent::render(const glm::mat4& parentTrans)
         Renderer::Vertex vertices[4];
 
         // clang-format off
-        vertices[0] = {{0.0f,    0.0f   }, {0.0f, 0.0f}, 0xFFFFFFFF};
-        vertices[1] = {{0.0f,    mSize.y}, {0.0f, 1.0f}, 0xFFFFFFFF};
-        vertices[2] = {{mSize.x, 0.0f   }, {1.0f, 0.0f}, 0xFFFFFFFF};
-        vertices[3] = {{mSize.x, mSize.y}, {1.0f, 1.0f}, 0xFFFFFFFF};
+        vertices[0] = {{0.0f,    0.0f   }, {0.0f, 0.0f}, mColorShift};
+        vertices[1] = {{0.0f,    mSize.y}, {0.0f, 1.0f}, mColorGradientHorizontal ? mColorShift : mColorShiftEnd};
+        vertices[2] = {{mSize.x, 0.0f   }, {1.0f, 0.0f}, mColorGradientHorizontal ? mColorShiftEnd : mColorShift};
+        vertices[3] = {{mSize.x, mSize.y}, {1.0f, 1.0f}, mColorShiftEnd};
         // clang-format on
 
         // Round vertices.
diff --git a/es-core/src/components/GIFAnimComponent.h b/es-core/src/components/GIFAnimComponent.h
index cf525bb8c..55ad40b36 100644
--- a/es-core/src/components/GIFAnimComponent.h
+++ b/es-core/src/components/GIFAnimComponent.h
@@ -101,6 +101,10 @@ private:
     bool mExternalPause;
     bool mAlternate;
     bool mTargetIsMax;
+
+    unsigned int mColorShift;
+    unsigned int mColorShiftEnd;
+    bool mColorGradientHorizontal;
 };
 
 #endif // ES_CORE_COMPONENTS_GIF_ANIM_COMPONENT_H
diff --git a/es-core/src/components/LottieAnimComponent.cpp b/es-core/src/components/LottieAnimComponent.cpp
index 076e488d3..f750bf5be 100644
--- a/es-core/src/components/LottieAnimComponent.cpp
+++ b/es-core/src/components/LottieAnimComponent.cpp
@@ -38,6 +38,9 @@ LottieAnimComponent::LottieAnimComponent()
     , mExternalPause {false}
     , mAlternate {false}
     , mTargetIsMax {false}
+    , mColorShift {0xFFFFFFFF}
+    , mColorShiftEnd {0xFFFFFFFF}
+    , mColorGradientHorizontal {true}
 {
     // Get an empty texture for rendering the animation.
     mTexture = TextureResource::get("");
@@ -313,6 +316,30 @@ void LottieAnimComponent::applyTheme(const std::shared_ptr<ThemeData>& theme,
         }
     }
 
+    if (properties & COLOR) {
+        if (elem->has("color")) {
+            mColorShift = elem->get<unsigned int>("color");
+            mColorShiftEnd = mColorShift;
+        }
+        if (elem->has("colorEnd"))
+            mColorShiftEnd = elem->get<unsigned int>("colorEnd");
+        if (elem->has("gradientType")) {
+            const std::string& gradientType {elem->get<std::string>("gradientType")};
+            if (gradientType == "horizontal") {
+                mColorGradientHorizontal = true;
+            }
+            else if (gradientType == "vertical") {
+                mColorGradientHorizontal = false;
+            }
+            else {
+                mColorGradientHorizontal = true;
+                LOG(LogWarning) << "LottieAnimComponent: Invalid theme configuration, property "
+                                   "\"gradientType\" for element \""
+                                << element.substr(10) << "\" defined as \"" << gradientType << "\"";
+            }
+        }
+    }
+
     if (elem->has("path"))
         setAnimation(elem->get<std::string>("path"));
 }
@@ -503,10 +530,10 @@ void LottieAnimComponent::render(const glm::mat4& parentTrans)
         Renderer::Vertex vertices[4];
 
         // clang-format off
-        vertices[0] = {{0.0f,    0.0f   }, {0.0f, 0.0f}, 0xFFFFFFFF};
-        vertices[1] = {{0.0f,    mSize.y}, {0.0f, 1.0f}, 0xFFFFFFFF};
-        vertices[2] = {{mSize.x, 0.0f   }, {1.0f, 0.0f}, 0xFFFFFFFF};
-        vertices[3] = {{mSize.x, mSize.y}, {1.0f, 1.0f}, 0xFFFFFFFF};
+        vertices[0] = {{0.0f,    0.0f   }, {0.0f, 0.0f}, mColorShift};
+        vertices[1] = {{0.0f,    mSize.y}, {0.0f, 1.0f}, mColorGradientHorizontal ? mColorShift : mColorShiftEnd};
+        vertices[2] = {{mSize.x, 0.0f   }, {1.0f, 0.0f}, mColorGradientHorizontal ? mColorShiftEnd : mColorShift};
+        vertices[3] = {{mSize.x, mSize.y}, {1.0f, 1.0f}, mColorShiftEnd};
         // clang-format on
 
         // Round vertices.
diff --git a/es-core/src/components/LottieAnimComponent.h b/es-core/src/components/LottieAnimComponent.h
index e2600f0f0..8ba8fb97b 100644
--- a/es-core/src/components/LottieAnimComponent.h
+++ b/es-core/src/components/LottieAnimComponent.h
@@ -58,7 +58,7 @@ private:
     std::vector<uint8_t> mPictureRGBA;
     std::unordered_map<size_t, std::vector<uint8_t>> mFrameCache;
     // Set a 1024 MiB total Lottie animation cache as default.
-    static inline size_t mMaxTotalFrameCache = 1024 * 1024 * 1024;
+    static inline size_t mMaxTotalFrameCache {1024 * 1024 * 1024};
     static inline size_t mTotalFrameCache;
     bool mCacheFrames;
     size_t mMaxCacheSize;
@@ -87,6 +87,10 @@ private:
     bool mExternalPause;
     bool mAlternate;
     bool mTargetIsMax;
+
+    unsigned int mColorShift;
+    unsigned int mColorShiftEnd;
+    bool mColorGradientHorizontal;
 };
 
 #endif // ES_CORE_COMPONENTS_LOTTIE_ANIM_COMPONENT_H