Logo is not gradient in chrome

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

1 answer

  • answered 2021-11-05 16:07 A Haworth

    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>

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum