diff --git a/frameworks/bridge/declarative_frontend/jsview/js_view_abstract.cpp b/frameworks/bridge/declarative_frontend/jsview/js_view_abstract.cpp
index 75daafd8e1ae54f89b9212995b4f74cbc7b8a305..4f805ae06c9205f4c3fd8a2bc8be78b642f90a6b 100644
--- a/frameworks/bridge/declarative_frontend/jsview/js_view_abstract.cpp
+++ b/frameworks/bridge/declarative_frontend/jsview/js_view_abstract.cpp
@@ -2778,6 +2778,38 @@ void JSViewAbstract::JsBackdropBlur(const JSCallbackInfo& info)
     info.SetReturnValue(info.This());
 }
 
+void JSViewAbstract::JsGradientBlur(const JSCallbackInfo& info)
+{
+    LOGE("[PP TS]JSViewAbstract::JsGradientBlur: info length: %{public}d", info.Length());
+    if (info.Length() < 5) {
+        LOGE("The argv is wrong, it is supposed to have at least 1 argument");
+        return;
+    }
+    double blur = 0.0;
+    if (!ParseJsDouble(info[0], blur)) {
+        return;
+    }
+    int32_t mode= 0;
+    if (!ParseJsInt32(info[1], mode)) {
+        return;
+    }
+    int32_t fullBlurStart = 0;
+    if (!ParseJsInt32(info[2], fullBlurStart)) {
+        return;
+    }
+    int32_t fullBlurEnd = 0;
+    if (!ParseJsInt32(info[3], fullBlurEnd)) {
+        return;
+    }
+    int32_t gradientBlurEnd = 0;
+    if (!ParseJsInt32(info[4], gradientBlurEnd)) {
+        return;
+    }
+    LOGE("[PP TS]JSViewAbstract::JsGradientBlur: info: %{public}f, %{public}d, %{public}d, %{public}d, %{public}d", blur, mode, fullBlurStart, fullBlurEnd, gradientBlurEnd);
+    SetGradientBlur(blur, static_cast<GradientBlurMode>(mode), fullBlurStart, fullBlurEnd, gradientBlurEnd);
+    info.SetReturnValue(info.This());
+}
+
 void JSViewAbstract::JsWindowBlur(const JSCallbackInfo& info)
 {
     std::vector<JSCallbackInfoType> checkList { JSCallbackInfoType::OBJECT };
@@ -4714,6 +4746,7 @@ void JSViewAbstract::JSBind()
     JSClass<JSViewAbstract>::StaticMethod("blur", &JSViewAbstract::JsBlur);
     JSClass<JSViewAbstract>::StaticMethod("colorBlend", &JSViewAbstract::JsColorBlend);
     JSClass<JSViewAbstract>::StaticMethod("backdropBlur", &JSViewAbstract::JsBackdropBlur);
+    JSClass<JSViewAbstract>::StaticMethod("gradientBlur", &JSViewAbstract::JsGradientBlur);
     JSClass<JSViewAbstract>::StaticMethod("windowBlur", &JSViewAbstract::JsWindowBlur);
     JSClass<JSViewAbstract>::StaticMethod("visibility", &JSViewAbstract::SetVisibility);
     JSClass<JSViewAbstract>::StaticMethod("flexBasis", &JSViewAbstract::JsFlexBasis);
@@ -4970,6 +5003,13 @@ void JSViewAbstract::SetBackdropBlur(float radius)
     ViewAbstractModel::GetInstance()->SetBackdropBlur(dimensionRadius);
 }
 
+void JSViewAbstract::SetGradientBlur(float radius, GradientBlurMode mode, int32_t fullBlurStart,
+                                                int32_t fullBlurEnd, int32_t gradientBlurEnd)
+{
+    Dimension dimensionRadius(radius, DimensionUnit::PX);
+    ViewAbstractModel::GetInstance()->SetGradientBlur(dimensionRadius, mode, fullBlurStart, fullBlurEnd, gradientBlurEnd);
+}
+
 void JSViewAbstract::SetWindowBlur(float progress, WindowBlurStyle blurStyle)
 {
     ViewAbstractModel::GetInstance()->SetWindowBlur(progress, blurStyle);
diff --git a/frameworks/bridge/declarative_frontend/jsview/js_view_abstract.h b/frameworks/bridge/declarative_frontend/jsview/js_view_abstract.h
index 48081a47fe482fcd2417996bc8ce1a5a23d39d61..a98e3928c2fa3e06b9ce8be1099da2fd72536b81 100644
--- a/frameworks/bridge/declarative_frontend/jsview/js_view_abstract.h
+++ b/frameworks/bridge/declarative_frontend/jsview/js_view_abstract.h
@@ -112,6 +112,7 @@ public:
     static void JsBlur(const JSCallbackInfo& info);
     static void JsColorBlend(const JSCallbackInfo& info);
     static void JsBackdropBlur(const JSCallbackInfo& info);
+    static void JsGradientBlur(const JSCallbackInfo& info);
     static void JsWindowBlur(const JSCallbackInfo& info);
     static void JsFlexBasis(const JSCallbackInfo& info);
     static void JsFlexGrow(const JSCallbackInfo& info);
@@ -291,6 +292,8 @@ public:
     static void SetBlur(float radius);
     static void SetColorBlend(Color color);
     static void SetBackdropBlur(float radius);
+    static void SetGradientBlur(float radius, GradientBlurMode mode, int32_t fullBlurStart,
+                                                int32_t fullBlurEnd, int32_t gradientBlurEnd);
     static void SetWindowBlur(float progress, WindowBlurStyle blurStyle);
     static RefPtr<ThemeConstants> GetThemeConstants(const JSRef<JSObject>& jsObj = JSRef<JSObject>());
     static bool JsWidth(const JSRef<JSVal>& jsValue);
diff --git a/frameworks/bridge/declarative_frontend/jsview/models/view_abstract_model_impl.h b/frameworks/bridge/declarative_frontend/jsview/models/view_abstract_model_impl.h
index cd5c0f6918efecdcf9c0b7ecf7dc4c2ed5e4fc0f..0d97184c63562a5479b8d4bb95d500b18cc948af 100644
--- a/frameworks/bridge/declarative_frontend/jsview/models/view_abstract_model_impl.h
+++ b/frameworks/bridge/declarative_frontend/jsview/models/view_abstract_model_impl.h
@@ -114,6 +114,8 @@ public:
 
     void SetBackdropBlur(const Dimension& radius) override;
     void SetFrontBlur(const Dimension& radius) override;
+    void SetGradientBlur(const Dimension& radius, GradientBlurMode mode, int32_t fullBlurStart,
+                                        int32_t fullBlurEnd, int32_t gradientBlurEnd) override {};
     void SetBackShadow(const std::vector<Shadow>& shadows) override;
     void SetColorBlend(const Color& value) override;
     void SetWindowBlur(float progress, WindowBlurStyle blurStyle) override;
diff --git a/frameworks/core/components/common/layout/constants.h b/frameworks/core/components/common/layout/constants.h
index a4c3ab0efa188d4d06686efad7cdfb477b7c2468..6c86d2f67fb0cbff8c2f07c65d5bac089d1eda8f 100644
--- a/frameworks/core/components/common/layout/constants.h
+++ b/frameworks/core/components/common/layout/constants.h
@@ -417,6 +417,12 @@ enum class WindowBlurStyle {
     STYLE_BACKGROUND_XLARGE_DARK = 107,
 };
 
+enum class GradientBlurMode {
+    INVALID_GRADIENT_BLUR_MODE = 0,
+    VERTICAL_GRADIENT_BLUR_MODE = 1,
+    HORIZONTAL_GRADIENT_BLUR_MODE = 2,
+};
+
 enum class DisplayType { NO_SETTING = 0, FLEX, GRID, NONE, BLOCK, INLINE, INLINE_BLOCK, INLINE_FLEX };
 
 enum class VisibilityType {
diff --git a/frameworks/core/components_ng/base/view_abstract.cpp b/frameworks/core/components_ng/base/view_abstract.cpp
index 13abfbb0ca012fc8906c9da1f5cf1c3cd50f29be..4d2b1318df3406c6045a21036a6fa59e9ba6ddaf 100644
--- a/frameworks/core/components_ng/base/view_abstract.cpp
+++ b/frameworks/core/components_ng/base/view_abstract.cpp
@@ -1000,6 +1000,18 @@ void ViewAbstract::SetBackdropBlur(const Dimension& radius)
     }
 }
 
+void ViewAbstract::SetGradientBlur(const Dimension& radius, const GradientBlurMode& mode, const int32_t& fullBlurStart,
+                                        const int32_t& fullBlurEnd, const int32_t& gradientBlurEnd)
+{
+    if (!ViewStackProcessor::GetInstance()->IsCurrentVisualStateProcess()) {
+        LOGD("current state is not processed, return");
+        return;
+    }
+    NG::Vector4F para(static_cast<float>(mode), static_cast<float>(fullBlurStart), static_cast<float>(fullBlurEnd), static_cast<float>(gradientBlurEnd));
+    ACE_UPDATE_RENDER_CONTEXT(GradientBlurRadius, radius);
+    ACE_UPDATE_RENDER_CONTEXT(GradientBlurPara, para);
+}
+
 void ViewAbstract::SetFrontBlur(const Dimension& radius)
 {
     if (!ViewStackProcessor::GetInstance()->IsCurrentVisualStateProcess()) {
diff --git a/frameworks/core/components_ng/base/view_abstract.h b/frameworks/core/components_ng/base/view_abstract.h
index 8abbe7e0d557426fd5480071860a2fc090b6eeae..ea54f44eca546b9133070bab500e29a9dfd7d4b8 100644
--- a/frameworks/core/components_ng/base/view_abstract.h
+++ b/frameworks/core/components_ng/base/view_abstract.h
@@ -123,6 +123,8 @@ public:
     // decoration
     static void SetBackdropBlur(const Dimension& radius);
     static void SetFrontBlur(const Dimension& radius);
+    static void SetGradientBlur(const Dimension& radius, const GradientBlurMode& mode, const int32_t& fullBlurStart,
+                                            const int32_t& fullBlurEnd, const int32_t& gradientBlurEnd);
     static void SetBackShadow(const Shadow& shadow);
 
     // graphics
diff --git a/frameworks/core/components_ng/base/view_abstract_model.h b/frameworks/core/components_ng/base/view_abstract_model.h
index 52fdada522390632bace2efcf8fe2a11285ec5cb..afcd62e4dc91f17ee7bf0014e1a412410931dae6 100644
--- a/frameworks/core/components_ng/base/view_abstract_model.h
+++ b/frameworks/core/components_ng/base/view_abstract_model.h
@@ -155,6 +155,8 @@ public:
     virtual void SetMask(const RefPtr<BasicShape>& shape) = 0;
     virtual void SetBackdropBlur(const Dimension& radius) = 0;
     virtual void SetFrontBlur(const Dimension& radius) = 0;
+    virtual void SetGradientBlur(const Dimension& radius, GradientBlurMode mode, int32_t fullBlurStart,
+                                        int32_t fullBlurEnd, int32_t gradientBlurEnd) = 0;
     virtual void SetBackShadow(const std::vector<Shadow>& shadows) = 0;
     virtual void SetColorBlend(const Color& value) = 0;
     virtual void SetWindowBlur(float progress, WindowBlurStyle blurStyle) = 0;
diff --git a/frameworks/core/components_ng/base/view_abstract_model_ng.h b/frameworks/core/components_ng/base/view_abstract_model_ng.h
index 3afc44409cbba50011bbf35d3c622b2dd0b46ec7..c28d06b0703a202e9a10d4d8a47dd1cf0214c80e 100644
--- a/frameworks/core/components_ng/base/view_abstract_model_ng.h
+++ b/frameworks/core/components_ng/base/view_abstract_model_ng.h
@@ -455,6 +455,12 @@ public:
         ViewAbstract::SetBackdropBlur(radius);
     }
 
+    void SetGradientBlur(const Dimension& radius, GradientBlurMode mode, int32_t fullBlurStart,
+                                        int32_t fullBlurEnd, int32_t gradientBlurEnd) override
+    {
+        ViewAbstract::SetGradientBlur(radius, mode, fullBlurStart, fullBlurEnd, gradientBlurEnd);
+    }
+
     void SetFrontBlur(const Dimension& radius) override
     {
         ViewAbstract::SetFrontBlur(radius);
diff --git a/frameworks/core/components_ng/render/adapter/rosen_render_context.cpp b/frameworks/core/components_ng/render/adapter/rosen_render_context.cpp
index af04c03cb5262e14b9d1723199ea0c86437d180a..3adf465dfad726cb3c5c8a5ff880402cc5f27d90 100644
--- a/frameworks/core/components_ng/render/adapter/rosen_render_context.cpp
+++ b/frameworks/core/components_ng/render/adapter/rosen_render_context.cpp
@@ -1455,6 +1455,31 @@ void RosenRenderContext::OnFrontBlurRadiusUpdate(const Dimension& radius)
     RequestNextFrame();
 }
 
+void RosenRenderContext::OnGradientBlurRadiusUpdate(const Dimension& radius)
+{
+    std::shared_ptr<Rosen::RSFilter> gradientBlurFilter = nullptr;
+    if (radius.IsValid()) {
+        float radiusPx = radius.ConvertToPx();
+        float gradientBlurRadius = SkiaDecorationPainter::ConvertRadiusToSigma(radiusPx);
+        gradientBlurFilter = Rosen::RSFilter::CreateBlurFilter(gradientBlurRadius, gradientBlurRadius);
+    }
+    LOGE("[PP TS]OnGradientBlurRadiusUpdate gradientBlurRadius:%{public}f", gradientBlurRadius);
+
+    CHECK_NULL_VOID(rsNode_);
+    rsNode_->SetGradientBlurFilter(gradientBlurFilter);
+    RequestNextFrame();
+}
+
+void RosenRenderContext::OnGradientBlurParaUpdate(const Vector4F& para)
+{
+    Rosen::Vector4<int32_t> gradientBlurPara;
+    gradientBlurPara.SetValues(static_cast<int32_t>(para.x), static_cast<int32_t>(para.y), static_cast<int32_t>(para.z), static_cast<int32_t>(para.w));
+    LOGE("[PP TS]OnGradientBlurRadiusUpdate para:%{public}f, %{public}f, %{public}f, %{public}f", para.x, para.y, para.z, para.w);
+    CHECK_NULL_VOID(rsNode_);
+    rsNode_->SetGradientBlurPara(gradientBlurPara);
+    RequestNextFrame();
+}
+
 void RosenRenderContext::OnBackShadowUpdate(const Shadow& shadow)
 {
     CHECK_NULL_VOID(rsNode_);
diff --git a/frameworks/core/components_ng/render/adapter/rosen_render_context.h b/frameworks/core/components_ng/render/adapter/rosen_render_context.h
index 0d34aeff90f18ca74de59a8a947220184fac13c1..d96c9b5e48eec5916de6a15942de1c656c3dec43 100644
--- a/frameworks/core/components_ng/render/adapter/rosen_render_context.h
+++ b/frameworks/core/components_ng/render/adapter/rosen_render_context.h
@@ -266,6 +266,8 @@ private:
     void OnFrontHueRotateUpdate(float hueRotate) override;
     void OnFrontColorBlendUpdate(const Color& colorBlend) override;
     void OnFrontBlurRadiusUpdate(const Dimension& radius) override;
+    void OnGradientBlurRadiusUpdate(const Dimension& radius) override;
+    void OnGradientBlurParaUpdate(const Vector4F& para) override;
 
     void OnOverlayTextUpdate(const OverlayOptions& overlay) override;
     void OnMotionPathUpdate(const MotionPathOption& motionPath) override;
diff --git a/frameworks/core/components_ng/render/render_context.h b/frameworks/core/components_ng/render/render_context.h
index 82ddbfcb1becb4f77b6d418ba289fba39d43e242..14a30a6ee7e578c2ec277150c9ddbab0eb6b94f5 100644
--- a/frameworks/core/components_ng/render/render_context.h
+++ b/frameworks/core/components_ng/render/render_context.h
@@ -302,6 +302,8 @@ public:
     ACE_DEFINE_PROPERTY_FUNC_WITH_GROUP(Graphics, FrontHueRotate, float);
     ACE_DEFINE_PROPERTY_FUNC_WITH_GROUP(Graphics, FrontColorBlend, Color);
     ACE_DEFINE_PROPERTY_FUNC_WITH_GROUP(Graphics, FrontBlurRadius, Dimension);
+    ACE_DEFINE_PROPERTY_FUNC_WITH_GROUP(Graphics, GradientBlurRadius, Dimension);
+    ACE_DEFINE_PROPERTY_FUNC_WITH_GROUP(Graphics, GradientBlurPara, Vector4F);
     ACE_DEFINE_PROPERTY_FUNC_WITH_GROUP(Graphics, BackShadow, Shadow);
 
     // BorderRadius.
@@ -405,6 +407,8 @@ protected:
     virtual void OnFrontHueRotateUpdate(float value) {}
     virtual void OnFrontColorBlendUpdate(const Color& value) {}
     virtual void OnFrontBlurRadiusUpdate(const Dimension& value) {}
+    virtual void OnGradientBlurRadiusUpdate(const Dimension& radius) {}
+    virtual void OnGradientBlurParaUpdate(const Vector4F& para) {}
     virtual void OnBackShadowUpdate(const Shadow& shadow) {}
 
     virtual void OnOverlayTextUpdate(const OverlayOptions& overlay) {}
diff --git a/frameworks/core/components_ng/render/render_property.h b/frameworks/core/components_ng/render/render_property.h
index e157eb583f7716a7f8a5609edb9153bb12d728fe..1fc2c7b204a4eb663feb6ebdab45669a7c6b4276 100644
--- a/frameworks/core/components_ng/render/render_property.h
+++ b/frameworks/core/components_ng/render/render_property.h
@@ -158,6 +158,8 @@ struct GraphicsProperty {
     ACE_DEFINE_PROPERTY_GROUP_ITEM(FrontHueRotate, float);
     ACE_DEFINE_PROPERTY_GROUP_ITEM(FrontColorBlend, Color);
     ACE_DEFINE_PROPERTY_GROUP_ITEM(FrontBlurRadius, Dimension);
+    ACE_DEFINE_PROPERTY_GROUP_ITEM(GradientBlurRadius, Dimension);
+    ACE_DEFINE_PROPERTY_GROUP_ITEM(GradientBlurPara, Vector4F);
     ACE_DEFINE_PROPERTY_GROUP_ITEM(BackShadow, Shadow);
     void ToJsonValue(std::unique_ptr<JsonValue>& json) const;
 };