There is white text on the page and a button below it. Additionally, animated gradients are applied to fill the text. When the button is clicked, the -webkit-text-fill-color property will become transparent, causing the text color to suddenly change to match the gradient.
As shown below: https://codepen.io/hvyjhqnt-the-vuer/pen/poQdaLQ
Is it possible to achieve a smooth transition from white to gradient?
(-webkit-text-fill-color attribute does not directly support transition)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The CSS color property is convertible, so use it.
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Smooth color change in js</title> <link rel="stylesheet" href="css/styles.css" /> <style> @font-face { font-family: Alice; src: local(Alice), url(../fonts/Alice-Regular.ttf); } html { height: 100%; } body { text-align: center; justify-content: center; align-items: center; background-color: #201e1e; } h1 { font-family: Alice; font-size: 7vw; background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); -webkit-background-clip: text; background-clip: text; color: white; transition: color 5s linear; background-size: 500% 500%; animation: textShine 5s ease-in-out infinite alternate; } button { font-family: Alice; font-size: 20px; padding: 10px 20px; background-color: #201e1e; color: white; border: 2px solid white; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background: linear-gradient(45deg, #38292c, #362d31, #363c3d, #2f3026); } @keyframes textShine { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } </style> </head> <body> <h1 id="my-text" class="show">Hello word</h1> <button id="button" onclick="changeColor()">Переливайся</button> <script src="script.js"></script> </body> <script> let col; function changeColor() { const myText = document.getElementById("my-text"); const computedStyle = window.getComputedStyle(myText); const textColor = computedStyle.getPropertyValue("color"); if (textColor === "rgb(255, 255, 255)") { col = "transparent"; document.getElementById("button").innerHTML = "Не переливайся"; } else { col = "white"; document.getElementById("button").innerHTML = "Переливайся"; } myText.style.color = col; } </script>