Canvas color gradients are a visual effect used in web design, where colors transition smoothly across the canvas element of a webpage. They are created using CSS gradients or JavaScript to manipulate the canvas context. CSS gradients are defined using the 'linear-gradient' or 'radial-gradient' functions, while JavaScript requires manipulating the canvas's pixel data.