CSS background-image gradient in :root - css

Question

I have a code that obviously doesn't work. It is a gradient after the body element. Gradient was working before I decided to move colors to :root. And here is this problematic code:
:root {
--primary: #222;
--primary-rgb: 31, 31, 31;
--color-888: #888;
--color-888-rgb: 136, 136, 136;
--color-1f1: #1f1f1f;
--color-white-button: #fff;
--color-b8b: #b8b8b8;
--color-f21: #F23D3F;
--pre-bg-rgb: 31, 31, 31;
--scrollbar-hover: #4a4a4a;
--scrollbar-active: #383838;
--fade-rgb: 34, 34, 34;
}
[data-theme="dark"] {
--primary: #fff;
--primary-rgb: 255, 255, 255;
--color-888: #000;
--color-888-rgb: 0, 0, 0;
--color-1f1: #ccc;
--color-white-button: #000;
--color-b8b: #d4d4d4;
--color-f21: #f52a2c;
--pre-bg-rgb: 0, 0, 0;
--scrollbar-hover: #363636;
--scrollbar-active: #454545;
--fade-rgb: 255, 255, 255;
}
body::after {
content: '';
position: fixed;
bottom: 0;
pointer-events: none;
width: 100%;
height: 30px;
background: -webkit-linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
background-image: -moz-linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
background-image: -o-linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
background-image: linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
background-image: -ms-linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);
}
Why isn't it working?
Here's a link to the demo: https://codepen.io/MAJO-SEARCH/project/editor/XEWoVE

Answer 1

You are using a very old syntax that is no more needed and doesn't work with CSS variable.
Simply do like below. Gradient is now supported everywhere and no need vendor prefixes.
:root {
--primary: #222;
--primary-rgb: 31, 31, 31;
--color-888: #888;
--color-888-rgb: 136, 136, 136;
--color-1f1: #1f1f1f;
--color-white-button: #fff;
--color-b8b: #b8b8b8;
--color-f21: #F23D3F;
--pre-bg-rgb: 31, 31, 31;
--scrollbar-hover: #4a4a4a;
--scrollbar-active: #383838;
--fade-rgb: 34, 34, 34;
}
[data-theme="dark"] {
--primary: #fff;
--primary-rgb: 255, 255, 255;
--color-888: #000;
--color-888-rgb: 0, 0, 0;
--color-1f1: #ccc;
--color-white-button: #000;
--color-b8b: #d4d4d4;
--color-f21: #f52a2c;
--pre-bg-rgb: 0, 0, 0;
--scrollbar-hover: #363636;
--scrollbar-active: #454545;
--fade-rgb: 255, 255, 255;
}
body::after {
content: '';
position: fixed;
bottom: 0;
pointer-events: none;
width: 100%;
height: 30px;
background: linear-gradient(rgba(var(--primary-rgb), 0) 0%, rgba(var(--primary-rgb), 1) 100%);