Unable to get CSS variables to work in any browser

Question

I am having trouble getting CSS variables to work, I am doing the following:

:root {
  --base: #ffcd600;
  --spacing: 10px;
  --blur: 10px;
}

img {
  padding: var(--spacing);
  background: var(--base);
}

However I am seeing the element inspector as shown below:

   img {
      padding: var(--spacing);
      background: var(--base);
    }

Answer 1

--base: #ffcd600;

too many characters in your hexadecimal value.