I am new to WebDev and have been following a youtube tutorial for creating a website. However, I am stuck at this part. I cannot get my Logo to be gradient in Chrome.
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199, 100%);
background-size: 100;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}
If you run your code (plus a relevant element) using your browser's dev tools inspect facility you will see a yellow triangle or something similar beside both the background-image and background-size properties.
The background image has a spurious comma.
The background-size is not needed in this case - but if you did need it you'd have to give it units.
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
}<div id="navbar__logo">LOGO</div>