CSS3 gradients let you display smooth transitions between two or more specified colors.
In this demo you can choose the gradient code from the selection list on the left, or you can write your own in the CSS code window. The chosen gradient is applied to the background of the box in the middle of the display (on the right).
Open the CSS Code window, see there the current code. There are a few commented examples in the CSS. Just remove the comments and look for the result. Edit the code as you wish. Add other CSS properties inside the code to explore additional combinations.
If you write your code, preceed the gradient by 'background:' or 'background-image:'.
Question: How do you make a mix of red, yellow, blue, green, purple colors?
Answer: background: linear-gradient(red, yellow, blue, green, purple);
Question: How do you make the whole box with a single color: for exampe blue box?
Answer: background: linear-gradient(blue, blue);
You may ask why not to use just background-color: blue. You will see why later in this lecture, when we will learn about blending.
Remember: Gradient is an image.