diff --git a/doric-Qt/example/doric/resources/stack.qml b/doric-Qt/example/doric/resources/stack.qml
index 60534b6e..c1cc6bf6 100644
--- a/doric-Qt/example/doric/resources/stack.qml
+++ b/doric-Qt/example/doric/resources/stack.qml
@@ -6,6 +6,7 @@ import QtGraphicalEffects 1.12
 import "util.mjs" as Util
 
 Rectangle {
+    id: root
     property var wrapper
 
     clip: true
@@ -16,10 +17,14 @@ Rectangle {
 
     onWidthChanged: {
         console.log(tag, uuid + " onWidthChanged: " + this.width)
+
+        updateGradient()
     }
 
     onHeightChanged: {
         console.log(tag, uuid + " onHeightChanged: " + this.height)
+
+        updateGradient()
     }
 
     color: 'transparent'
@@ -71,4 +76,105 @@ Rectangle {
         color: shadowColor
         transparentBorder: true
     }
+
+
+    property var backgroundColorIsObject: false
+    onBackgroundColorIsObjectChanged: {
+        if (backgroundColorIsObject) {
+            lineGradient.anchors.fill = root
+        } else {
+            lineGradient.anchors.fill = null
+        }
+    }
+
+    property variant gradientColors: []
+    property variant gradientLocations: []
+
+    onGradientColorsChanged: {
+        console.log(tag, uuid + " onGradientColorsChanged: " + gradientColors)
+        if (gradientColors.length > 0) {
+            let stops = []
+
+            if (gradientLocations.length == 0) {
+                let unit = 1 / (gradientColors.length - 1)
+                for (let i = 0;i !== gradientColors.length;i++) {
+                    let a = ((gradientColors[i] >> 24) & 0xff) / 255;
+                    let r = ((gradientColors[i] >> 16) & 0xff) / 255;
+                    let g = ((gradientColors[i] >> 8) & 0xff) / 255;
+                    let b = ((gradientColors[i] >> 0) & 0xff) / 255;
+                    let stop = stopComponent.createObject(root, {"position": unit * i, "color": Qt.rgba(r, g, b, a)})
+                    console.log(tag, uuid + " onGradientColorsChanged: " + "position: " + unit * i + " color: " + Qt.rgba(r, g, b, a))
+                    stops.push(stop)
+                }
+            } else {
+                for (let i = 0;i !== gradientColors.length;i++) {
+                    let a = ((gradientColors[i] >> 24) & 0xff) / 255;
+                    let r = ((gradientColors[i] >> 16) & 0xff) / 255;
+                    let g = ((gradientColors[i] >> 8) & 0xff) / 255;
+                    let b = ((gradientColors[i] >> 0) & 0xff) / 255;
+                    let stop = stopComponent.createObject(root, {"position": gradientLocations[i], "color": Qt.rgba(r, g, b, a)})
+                    console.log(tag, uuid + " onGradientColorsChanged: " + "position: " + gradientLocations[i] + " color: " + Qt.rgba(r, g, b, a))
+                    stops.push(stop)
+                }
+            }
+
+            innerGradient.stops = stops
+        }
+    }
+
+    property var orientation: 0
+
+    function updateGradient() {
+        switch (orientation) {
+        case 0:
+            lineGradient.start = Qt.point(0, 0)
+            lineGradient.end = Qt.point(0, root.height)
+            break
+        case 1:
+            lineGradient.start = Qt.point(root.width, 0)
+            lineGradient.end = Qt.point(0, root.height)
+            break
+        case 2:
+            lineGradient.start = Qt.point(root.width, 0)
+            lineGradient.end = Qt.point(0, 0)
+            break
+        case 3:
+            lineGradient.start = Qt.point(root.width, root.height)
+            lineGradient.end = Qt.point(0, 0)
+            break
+        case 4:
+            lineGradient.start = Qt.point(0, root.height)
+            lineGradient.end = Qt.point(0, 0)
+            break
+        case 5:
+            lineGradient.start = Qt.point(0, root.height)
+            lineGradient.end = Qt.point(root.width, 0)
+            break
+        case 6:
+            lineGradient.start = Qt.point(0, 0)
+            lineGradient.end = Qt.point(root.width, 0)
+            break
+        case 7:
+            lineGradient.start = Qt.point(0, 0)
+            lineGradient.end = Qt.point(root.width, root.height)
+            break
+        }
+    }
+    onOrientationChanged: {
+        console.log(tag, uuid + " onOrientationChanged: " + orientation)
+
+        updateGradient()
+    }
+
+    LinearGradient {
+        Component {
+            id:stopComponent
+            GradientStop {}
+        }
+
+        id: lineGradient
+        gradient: Gradient {
+            id: innerGradient
+        }
+    }
 }
diff --git a/doric-Qt/example/doric/shader/DoricViewNode.cpp b/doric-Qt/example/doric/shader/DoricViewNode.cpp
index 25239559..d6556d84 100644
--- a/doric-Qt/example/doric/shader/DoricViewNode.cpp
+++ b/doric-Qt/example/doric/shader/DoricViewNode.cpp
@@ -105,9 +105,53 @@ void DoricViewNode::blend(QQuickItem *view, QString name, QJsonValue prop) {
   } else if (name == "height") {
     getLayouts()->setHeight(prop.toDouble());
   } else if (name == "backgroundColor") {
-    view->setProperty(
-        "backgroundColor",
-        QVariant::fromValue(DoricUtils::doricColor(prop.toInt())));
+    if (prop.isDouble()) {
+      view->setProperty("backgroundColorIsObject", false);
+      view->setProperty(
+          "backgroundColor",
+          QVariant::fromValue(DoricUtils::doricColor(prop.toInt())));
+    } else if (prop.isObject()) {
+      QJsonObject dict = prop.toObject();
+      view->setProperty("backgroundColorIsObject", true);
+
+      QJsonValue orientation = prop["orientation"];
+      if (orientation.isDouble()) {
+        view->setProperty("orientation", orientation.toInt());
+      }
+      if (dict.keys().contains("colors")) {
+        QVector<int> colors;
+        QJsonArray colorArray = dict["colors"].toArray();
+        for (int i = 0; i != colorArray.size(); i++) {
+          colors.append(colorArray.at(i).toInt());
+        }
+
+        if (dict.keys().contains("locations")) {
+          QJsonValue locationsValue = dict["locations"];
+          if (locationsValue.isArray()) {
+            QVector<double> locations;
+            QJsonArray locationArray = locationsValue.toArray();
+            for (int i = 0; i != locationArray.size(); i++) {
+              locations.append(locationArray.at(i).toDouble());
+            }
+            view->setProperty("gradientLocations",
+                              QVariant::fromValue(locations));
+          }
+        }
+
+        view->setProperty("gradientColors", QVariant::fromValue(colors));
+      } else {
+        if (dict.keys().contains("start") && dict.keys().contains("end")) {
+          int start = dict["start"].toInt();
+          int end = dict["end"].toInt();
+
+          QVector<int> colors;
+          colors.append(start);
+          colors.append(end);
+
+          view->setProperty("gradientColors", QVariant::fromValue(colors));
+        }
+      }
+    }
   } else if (name == "x") {
     getLayouts()->setMarginLeft(prop.toDouble());
   } else if (name == "y") {