Logo is not gradient in chrome

Question

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;
}

user_10867454 · Answer

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;
}

LOGO

Logo is not gradient in chrome

1 Answers