Gradients represent a smooth transition from one color to another. CSS3 has a number of built-in gradients that can be used to create the background of an element.
Gradients in CSS do not represent any special property. They only create a value that is assigned to the background-image property .
A linear gradient extends in a straight line from one end of an element to the other, making a smooth transition from one color to another.
To create a gradient, you need to specify its beginning and several colors, for example:
background-image: linear-gradient(left,black,white);
In this case, the beginning of the gradient will be the left edge of the element, which is indicated by the value left. Gradient colors: black (black) and white (white). That is, starting from the left edge of the element to the right, there will be a smooth transition from black to white.
There is one drawback to using gradients – the variety of browsers forces you to use the vendor prefix:
-webkit- /* For Google Chrome, Safari, Microsoft Edge, Opera above version 15 */ -moz- /* For Mozilla Firefox */ -o- /* For Opera older than version 15 (Opera 12) */
So, the full use of the gradient will look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styling Tables in CSS3</title>
<style>
div {
width: 200px;
height: 100px;
background-color: #eee;
background-image: linear-gradient(left, black, white);
background-image: -o-linear-gradient(left, black, white);
background-image: -moz-linear-gradient(left, black, white);
background-image: -webkit-linear-gradient(left, black, white);
}
p {
margin: 0;
padding-top: 30px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div>
<p>Linear black and white gradient</p>
</div>
</body>
</html>
You can use the following values to set the start of the gradient: left(left to right), right(right to left), top(top to bottom), or bottom(bottom to top). For example, a vertical gradient would look like this:
background-image: linear-gradient(bottom, black, white);
You can also set the diagonal direction with two values:
background-image: linear-gradient(top left,black,white);
In addition to specific values like top or left, you can also specify an angle from 0 to 360, which will determine the direction of the gradient:
background-image: linear-gradient(30deg,black,white);
After the magnitude of the angles, the word deg is indicated .
For example, 0deg means the gradient starts at the left and moves to the right, while 45deg means it starts at the bottom left and moves at a 45° angle to the top right.
After defining the beginning of the gradient, you can specify the applied colors or anchor points. Flowers do not have to be two, there may be more:
background-image: linear-gradient(top, red, #ccc, blue);
All applied colors are evenly distributed. However, you can also specify specific background locations for color points. To do this, a second value is added after the color, which determines the position of the point.
background-image: linear-gradient(left, #ccc, red 20%, red 80%, #ccc);
repeating gradient
Use repeating-linear-gradient to create repeating linear gradients. For example:
background-image: repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px); background-image: -moz-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px); background-image: -webkit-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px);
In this case, the gradient starts at the left edge of the element with a 20 px stripe of gray (#ccc), fades to red up to 30 px, and then fades back to light blue up to 40 px (rgba(0, 0 , 126, .5)). The browser then repeats the gradient until it fills the entire surface of the element.