diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 5e0afd1f9a0..8a2b4a924a5 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -892,10 +892,11 @@ section, .oe_img_bg, [data-oe-shape-data] {
     -webkit-text-fill-color: transparent;
 
     // FIXME (or wait for a fix in Chrome): the code below is needed to make
-    // animated text work with gradient background on Chrome. But the side
-    // effect is that text node wrapping by a span (e.g. bold, italic) no longer
-    // have the "gradient crossing all the text" on it but its own gradient.
-    * {
+    // animated text work with gradient background on Chrome. It is not based
+    // on ".text-gradient *" only to avoid a side effect that makes text nodes
+    // wrapped in a span (e.g. bold, italic) no longer have the "gradient
+    // crossing the whole text" on them but their own gradient.
+    .o_animated_text, .o_animated_text *, &.o_animated_text * {
         background-image: inherit;
         -webkit-background-clip: inherit;
         -webkit-text-fill-color: inherit;