Gradient background. Linear-gradient(): Linear gradient in background
When we talk about gradients in CSS, we're talking about colored gradients.
There are two types of gradients in CSS:
- linear: colors go from one point to another, along direct lines;
- radial: colors go from the center of the circle to its edges, in everyone directions.
The gradient is considered background image and must be used with the appropriate property.
linear-gradient
The syntax for linear gradients is quite complex, but the basic idea is this:
- determine the desired colors;
- where these colors should appear along the axis(at the beginning, middle, end, etc.);
- in which direction there should be a gradient.
Let's start with a simple two-color gradient:
Div ( background-image: linear-gradient(red, blue); )
Default:
- vertical direction, top down;
- first color in beginning(up);
- second color in end(down).
Changing direction
If the top-down direction does not suit you, you can change it to one of the options:
- define gradient assignment, using keywords like to left top ;
- determine specific corner in degrees, like 45deg.
This direction must be set before color:
Div ( background-image: linear-gradient(to bottom right, yellow, purple); width: 200px; )
If you want to ask specific angle, then you can use the value in degrees:
- 0deg - from bottom to top;
- 20deg - slightly diagonally, going clockwise;
- 90deg - like 15 o'clock, from left to right;
- 180deg is the default, from top to bottom.
Div ( background-image: linear-gradient(20deg, green, blue); width: 150px; )
Adding more colors
You can insert as many colors as you like. They will evenly distributed along the axis:
- two colors: 0% and 100%
- three colors: 0%, 50% and 100%
- four colors: 0%, 33%, 67% and 100%
Div ( background-image: linear-gradient(orange, grey, yellow); width: 150px; )
Defining specific color points
If you do not want the color to be distributed evenly, you can set certain color positions using either percentages (%) or pixels (px):
Div ( background-image: linear-gradient(orange, gray 10%, yellow 50%); width: 150px; )
In these parameters:
- orange has no color position specified, so the default value is 0%;
- the gray color is closer to the top, by 10% instead of 50%;
- The yellow color occupies half of the gradient, from 50% to the end of 100%.
radial-gradient
While linear gradients follow a single axis, radial gradients spread in all directions. Their syntax is very similar to linear gradients, since both have dots of color. But instead of specifying a direction, you need to specify:
- form: circle or ellipse;
- starting point: which will be the center of a circle or ellipse;
- end point: where the edge of the circle or ellipse will be.
Div ( background-image: radial-gradient(red, yellow); padding: 1rem; width: 300px; )
Default:
- gradient is ellipse;
- first color starts at center;
- the last color ends in the farthest corner.
Starting position
Starting position works like background-position . You can install it via keyword at.
Div ( background-image: radial-gradient(at top right, black, lightgrey); padding: 1rem; width: 300px; )
End position
By default, the form ends at the farthest corner. You can choose:
- closest-side
- closest-corner
- farthest-side
- farthest-corner
Div ( background-image: radial-gradient(closest-corner at 20px 20px, green, blue); padding: 1rem; width: 300px; ) div:hover ( background-image: radial-gradient(farthest-side at 20px 20px, green, blue)
Fixed size
Instead of setting the start and end positions, you can simply set specific sizes:
Div ( background-image: radial-gradient(20px 10px at 75% 50%, darkviolet, pink); padding: 1rem; width: 300px; )
Gradients in CSS are powerful given infinite number options.
CSS gradients allow you to create a background of two or more colors that smoothly transition from one to another. They have been with us for quite a long time, and have pretty good browser support. Most modern browsers understand them without prefixes, for IE9 and older there is a Gradient Filter, and for IE9 you can use SVG.
Gradients can be used anywhere images are used: in backgrounds, as list bullets, they can be specified in content or border-image .
Linear-gradient
Linear gradients are quite easy to use. For the most basic gradient, just set the start and end colors:
Background: linear-gradient(oranged, gold);
There can be any number of colors more than two. You can also control the direction of the gradient and the boundaries (stopping points) of the colors.
The direction can be specified in degrees or keywords.
Key words: to top = 0deg ; to right = 90deg; to bottom = 180deg - default value; to left = 270deg .
Keywords can be combined to create a diagonal gradient, such as to top left .
Below you can see how different directions work in stretching from lilac to yellow:
Here is the code for the very first square, for example:
Top-left ( background: linear-gradient(to top left, purple, crimson, orangered, gold); )
One thing to remember is that to top right is not the same as 45deg . The gradient colors are perpendicular to the gradient direction line. With to top right, the line goes from the lower left to the upper right corner, with 45deg - it is located strictly at this angle, regardless of the size of the figure.
The difference is clearly visible in rectangular figures:
You can also set stop points for gradient colors; the values are specified in units or percentages and can be greater than 100% and less than 0%.
Examples of setting values in %, in em, and values that go beyond the boundaries of the element:
The closer the stopping points of neighboring colors are, the clearer the boundary between them will be. This way you can easily make striped backgrounds:
This is how you can create, for example, a background for a side column, stretched to the entire height of the parent element:
The stripes on the sidebar background are another gradient consisting of alternating full transparency and white with transparency 30%. Gradients with translucent colors are convenient because they can be applied over a background of any color.
The gradient in the example is set in complex, long code because the stripes should only be placed above the background for the sidebar. If you don't try to make everything the background for one block, you could solve the problem using a pseudo-element.
If there are no restrictions, the code can be much shorter:
Light ( background: peachpuff linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%) center center / 2em; ) .dark ( background: steelblue linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%) center center / 100% 1em )
In the first line we set background color element, type and direction (color and direction can be omitted), in the second - we determine the colors of the gradient and the border between them, in the third - we set the position and size of the resulting image. The most important part is the size. By default, the background is repeated, so the resulting pattern will fill the background of the element. Very easy and understandable :)
The entire entry can be made in one line, but for readability it is more convenient to write in several, especially for complex gradients.
It's also important to know that the transparent keyword means transparent black, not transparent white, so if you use it in Firefox you might end up with something like this:
To avoid this, use completely transparent colors of the desired shade, for example, white: rgba(255, 255, 255, 0) or black rgba(0, 0, 0, 0) . About different ways You can read the colors to set.
To find out the rgb notation of a specific color, you can use CSS.coloratum, an instrument from Lea Verou.
In addition to the usual linear-gradient, you can make a repeating-linear-gradient - a repeating gradient
Sample code:
Background: repeating-linear-gradient(green, green .5em, transparent .5em, transparent 1em);
Unfortunately, repeating gradients behave haphazardly and are only suitable for patterns that don't care about precision. If you need precision, use linear-gradient in combination with background-size and background-repeat .
Gradients have the same limitation as box-shadow: they cannot be given individual colors or direction. This leads to code duplication and an urgent need to use preprocessors when creating complex gradients.
Another limitation is that gradients are not animated, which, however, can be worked around to some extent.
For quick creation there are a lot of cross-browser gradients handy tool: colorzilla.com/gradient-editor/. In addition to code for modern browsers, it will offer code for older IE and SVG for 9th.
In combination with basic capabilities management background pictures gradients give the broadest opportunities to create backgrounds of varying degrees of complexity without using images at all. You can use gradients to create complex and interesting patterns, but this is a completely different topic.
The color gradient is smooth transition from one specified color to another through intermediate colors. In a linear gradient, the transition occurs in a straight line, from the point A to the point B. The gradient can have more than two reference points - then the transition is made from the point A to the point B, then from point B to the point C and so on.
How to Make a Background Linear Gradient in CSS
In CSS3 you can add gradient background to the elements through already known property background-image. The value is the linear-gradient() keyword, where in parentheses you need to specify the starting point of the gradient, the starting color and the ending color.
For example, let's make a background linear gradient that goes from purple to red. In this case, we want the starting point with the purple color to be with right side, and the gradient vector was directed to the left. Let's write the code:
Background-image: linear-gradient(to left, violet, red); Background gradient on block
Gradient point colors can be written in any format available in CSS, be it hexadecimal code, RGB format or other. The direction of the gradient is specified using the to prefix and then the keywords left , right , top and bottom , which can be combined to change the slope. For example:
Background-image: linear-gradient(to bottom right, #ee82ee, #ff0000); 
In addition, you can directly specify the angle of inclination using positive or negative number with the prefix deg (without a space). At a given angle of 0º or 360º, the gradient line will go from bottom to top. As the tilt angle increases, the vector moves clockwise (using a negative value reverses the movement). Example code entry:
Background-image: linear-gradient(-110deg, #ee82ee, #ff0000); 
Multiple anchor points
As we already said, a gradient can have more than two anchor points. In this case, the background will smoothly transition from the first color to the second, from the second to the third, from the third to the fourth, and so on until it reaches the final reference point. If you want to increase the number of these points in the gradient, just add them separated by commas. For example:
Background-image: linear-gradient(145deg, #ee82ee, slateblue, #ffd86a, purple); 
In our example, four reference color points are indicated, but you can add as many of them as you like and in any available color formats.
Transition length
By default, the browser places the dots at equal distances, so the gradation is uniform. But this distance can be controlled using units CSS dimensions. Let's look at the following example:
Background-image: linear-gradient(#92009b 20%, #f5e944 90%, #00ffa2); 
In our code, after the color #92009b the value 20% is indicated. Since it is near the first anchor point, this means that 20% of the element's length will be painted with the specified color. After which the gradient begins: a value of 90% tells the browser to reach the color #f5e944 by 90% of the element's length (starting at 20%). After which the transition to the third color begins in the remaining space - #00ffa2.
This topic also requires practice. Try creating a gradient background with multiple anchor points (more than two), play with the distance values, and watch the gradient change in the browser.
Vendor prefixes
To ensure cross-browser compatibility, some late CSS properties need to be appended with vendor prefixes - special prefixes added by browser developers:
- -webkit- - prefix for Chrome, Safari, Android;
- -moz- is a prefix for Firefox;
- -o- is the prefix for Opera.
Gradient background also requires the use of these prefixes if there is a need for support maximum quantity browsers. To do this, adapt the code as follows:
Background-image: -webkit-linear-gradient(left, violet, red); background-image: -moz-linear-gradient(left, violet, red); background-image: -o-linear-gradient(left, violet, red); background-image: linear-gradient(to left, violet, red);
Adding a prefix requires creating a separate ad. Also, as you may have noticed, properties with vendor prefixes Not require the use of the prefix to when indicating the direction of the gradient.
Internet Explorer support
Unfortunately, the gradient background only works in IE10+. Previous versions do not understand it and will ignore it. To provide at least a normal background in older browsers, you can create a so-called. "stub": select a suitable shade and write the background-color property over property with a gradient. Thus, old browser will apply a “backup” background color, and will skip properties unknown to it, whereas in more modern browser the gradient background will overlap and overlap the solid background.
If you have a translucent gradient set (for example, using a color RGBA format) and you don't want the background placeholder to show through, set the gradient using the shorthand background property instead of background-image . Then the background-color value will be overwritten to transparent .
Further in the tutorial: repeating-linear-gradient() - repeating linear gradient.
Vlad Merzhevich
A gradient is a smooth transition from one color to another, and there can be several colors and transitions between them. With the help of gradients, the most bizarre web design effects are created, for example, pseudo-three-dimensionality, glare, background, etc. Also, with a gradient, elements look more attractive than monochromatic ones.
There is no separate property for adding a gradient, since it is considered a background image, so it is added through the background-image property or the generic background property, as shown in example 1.
Example 1: Gradient
Here the obscene idiom traditionally begins the prosaic image, but the language game does not lead to an active dialogical understanding.
Result this example shown in Fig. 1.
Rice. 1. Linear Gradient for Paragraph
In the very simple case with two colors demonstrated in example 1, first write the position from which the gradient will begin, then the start and end colors.
To record a position, you first write to , and then add the keywords top , bottom and left , right , as well as their combinations. The order of the words is not important, you can write to left top or to top left . In table 1 shows different positions and the type of gradient obtained for colors #000 and #fff, otherwise from black to white.
| Position | Description | View | |
|---|---|---|---|
| to top | 0deg | From bottom to top. | |
| to left | 270deg | From right to left. | |
| to the bottom | 180deg | Top down. | |
| to right | 90deg | From left to right. | |
| to top left | From the lower right corner to the upper left. | ||
| to top right | From the lower left to the upper right. | ||
| to bottom left | From the upper right corner to the lower left. | ||
| to bottom right | From top left to bottom right. |
Instead of a keyword, you can specify the slope of the gradient line, which shows the direction of the gradient. First, the positive or negative value of the angle is written, then deg is added to it.
Zero degrees (or 360º) corresponds to the gradient from bottom to top, then the countdown is clockwise. The slope angle of the gradient line is shown below.
For the value top left and similar ones, the angle of the gradient line is calculated based on the size of the element so as to connect two diagonally opposite corner points.
To create complex gradients, two colors will no longer be enough; the syntax allows you to add an unlimited number of them, listing colors separated by commas. In this case you can use transparent color(keyword transparent ), and also translucent using the RGBA format, as shown in example 2.
Example 2: Translucent colors
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
The result of this example is shown in Fig. 2.
Rice. 2. Gradient with translucent colors
To accurately position colors in a gradient, the color value is followed by its position in percentages, pixels, or other units. For example, record red 0%, orange 50%, yellow 100% means the gradient starts out red, then 50% orange, and then all the way yellow. For simplicity, extreme units like 0% and 100% can be omitted; they are implied by default. Example 3 shows how to create a gradient button where the position of the second color out of three is set to 36%.
Example 3: Gradient Button
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
The result of this example is shown in Fig. 3.
Rice. 3. Gradient button
By setting the position of the color, you can get sharp transitions between colors, which ultimately gives a set of monochromatic stripes. So, for two colors you need to specify four colors, the first two colors are the same and start from 0% to 50%, the remaining colors are also the same and continue from 50% to 100%. In the example, 4 stripes are added as the background of the web page. Due to the fact that the extreme values are automatically substituted, they can not be specified, so it is enough to write only two colors.
Example 4. Plain stripes
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Typical European bourgeoisie and respectability are elegantly illustrated by the official language.
The result of this example is shown in Fig. 4. Note that one of the gradient colors is set to transparent, so it changes indirectly through the background color of the web page.
Rice. 4. Background of horizontal stripes
Gradients are quite popular among web designers, but adding them is complicated by different properties for each browser and specifying multiple colors. To make it easier for you to create gradients and insert them into code, I recommend the site www.colorzilla.com/gradient-editor with which you can easily set up gradients and immediately get required code. Available ready-made templates(Presets), viewing the result (Preview), adjusting colors (Adjustments), final code (CSS) that supports IE through filters. For those who worked in Photoshop or other graphic editor, creating gradients will seem like a piece of cake, but for others it won’t be difficult to figure it out quickly. In general, I highly recommend it.