diff --git a/.changeset/violet-chicken-grow.md b/.changeset/violet-chicken-grow.md
new file mode 100644
index 0000000000..3dc5e5b786
--- /dev/null
+++ b/.changeset/violet-chicken-grow.md
@@ -0,0 +1,7 @@
+---
+"@lynx-js/web-style-transformer": patch
+"@lynx-js/web-elements": patch
+"@lynx-js/web-core": patch
+---
+
+fix: --lynx-color will be removed, and if color contains `gradient` it will be processed as transparent.
diff --git a/packages/web-platform/web-elements/src/XText/x-text.css b/packages/web-platform/web-elements/src/XText/x-text.css
index 784d4ff10c..ae7ac6d01a 100644
--- a/packages/web-platform/web-elements/src/XText/x-text.css
+++ b/packages/web-platform/web-elements/src/XText/x-text.css
@@ -8,11 +8,15 @@ x-text {
   display: flex;
   overflow-wrap: break-word;
   align-items: stretch;
-  color: var(--lynx-color);
   background-image: var(--lynx-text-bg-color);
+  color: initial;
 }
+
+x-text > x-text, x-text > lynx-wrapper > x-text {
+  color: inherit;
+}
+
 x-text:not(x-text > x-text):not(x-text > lynx-wrapper > x-text) {
-  --lynx-color: canvastext;
   --lynx-text-bg-color: initial;
 }
 
diff --git a/packages/web-platform/web-style-transformer/src/transformLynxStyles.ts b/packages/web-platform/web-style-transformer/src/transformLynxStyles.ts
index 5caf242715..43f86e3a71 100644
--- a/packages/web-platform/web-style-transformer/src/transformLynxStyles.ts
+++ b/packages/web-platform/web-style-transformer/src/transformLynxStyles.ts
@@ -242,9 +242,8 @@ const renameRules: {
     },
   ],
   'color': [
-    'color',
     {
-      name: '--lynx-color',
+      name: 'color',
       valueProcessor(value) {
         return value.includes('gradient')
           ? 'transparent'
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts b/packages/web-platform/web-tests/tests/react.spec.ts
index 431983f461..baf5e77540 100644
--- a/packages/web-platform/web-tests/tests/react.spec.ts
+++ b/packages/web-platform/web-tests/tests/react.spec.ts
@@ -1586,6 +1586,12 @@ test.describe('reactlynx3 tests', () => {
         await goto(page, title);
         await diffScreenShot(page, 'text', 'word-break');
       });
+
+      test('basic-element-text-color', async ({ page }, { title }) => {
+        await goto(page, title);
+        await wait(100);
+        await diffScreenShot(page, 'text', 'basic-element-text-color');
+      });
     });
     test.describe('image', () => {
       test('basic-element-image-src', async ({ page }, { title }) => {
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/basic-element-text-color/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/basic-element-text-color/index-chromium-linux.png
new file mode 100644
index 0000000000..dddc60ed96
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/basic-element-text-color/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/basic-element-text-color/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/basic-element-text-color/index-firefox-linux.png
new file mode 100644
index 0000000000..b675192c6b
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/basic-element-text-color/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/basic-element-text-color/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/basic-element-text-color/index-webkit-linux.png
new file mode 100644
index 0000000000..587401cece
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/basic-element-text-color/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react/basic-element-text-color/index.css b/packages/web-platform/web-tests/tests/react/basic-element-text-color/index.css
new file mode 100644
index 0000000000..a22eec1b57
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-element-text-color/index.css
@@ -0,0 +1,9 @@
+.a {
+  font-size: 16px;
+  color: red;
+}
+
+.b {
+  font-size: 80px;
+  color: linear-gradient(green, yellow);
+}
diff --git a/packages/web-platform/web-tests/tests/react/basic-element-text-color/index.jsx b/packages/web-platform/web-tests/tests/react/basic-element-text-color/index.jsx
new file mode 100644
index 0000000000..b2be96b416
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-element-text-color/index.jsx
@@ -0,0 +1,16 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { root } from '@lynx-js/react';
+import './index.css';
+
+function App() {
+  return (
+    <view>
+      <text class='a b'>
+        hello lynx
+      </text>
+    </view>
+  );
+}
+root.render(<App></App>);