Linear-gradient(): Linear gradient in the background. Linear Gradient

Last update: 04/21/2016

Gradients represent a smooth transition from one color to another. CSS3 has a number of built-in gradients that you can use to create the background of an element.

Gradients in CSS do not represent any special property. They just 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, creating 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 start of the gradient will be the left edge of the element, which is indicated by the value left . Gradient colors: black and 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 above version 15 (Opera 12) */

So, a full use of the gradient will look like this:

To set the start of the gradient, you can use the following values: 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 using 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 value 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 start of the gradient, you can specify the colors or reference points to apply. There don’t have to be two colors, there can be more:

Background-image: linear-gradient(top, red, #ccc, blue);

All applied colors are distributed evenly. However, you can also specify specific background locations for color dots. 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

Using repeating-linear-gradient you can 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 stripe of gray color (#ccc) 20 pixels wide, then up to 30 pixels it goes to red, and then up to 40 pixels it goes back to light blue (rgba(0, 0 , 126, .5)). The browser then repeats the gradient until it fills the entire surface of the element.

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.

The result of this example is shown in Fig. 1.

Rice. 1. Linear Gradient for Paragraph

In the simplest case with two colors, demonstrated in example 1, the position from which the gradient will begin is first written, 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.

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 top left and similar values, the gradient line's inclination angle is calculated based on the element's dimensions 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 a transparent color (transparent keyword), as well as 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 assumed 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

Press me gently

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 your code, I recommend the site www.colorzilla.com/gradient-editor, which makes it easy to set up gradients and immediately get the desired code. There are ready-made templates (Presets), viewing the result (Preview), adjusting colors (Adjustments), final code (CSS) that supports IE through filters. For those who have worked in Photoshop or another graphic editor, creating gradients will seem like a piece of cake, but for others it will not be difficult to figure it out quickly. In general, I highly recommend it.

a! The gradient is an excellent tool for manipulating color in CSS3. Instead of using an image to create a gradient effect on a web page, it would be more beneficial to use CSS3 gradient and thereby “lighten” the site. Since the user will not need to waste time and traffic loading the background image. There are two main types of gradient: radial and linear. Today's post will be about them.

Linear Gradient

As the classification says, gradients in CSS3 are images. There are no special properties for them. And the ad uses the background image property.

In general, the gradient (linear) syntax looks like this:

So, let's talk about everything in order.

First of all, a linear gradient is declared by the linear-gradient() function. The function has three main meanings. The first value determines the starting position. The example indicates top i.e. starting position from above. You can also use bottom , left and right ;

If the angle is negative, the position will change from the lower left corner to the upper left.

The second value of the function is the starting color and its stop position, which is indicated as a percentage. Declaring this position is not necessary; the browser will default to 0% for the first color.

The last value is the second color and its stop position. Defaults to 100%. These extreme values ​​mean that the first color immediately begins to transition into the second. However, if we set the first color to 50%, then it will only begin to transition to the second from the middle of the available height. This is what the code looks like:

We get strips of equal height. With a clear border, there will be no color transition. To better understand how this works, experiment with the values.

A radial gradient, just like a linear one, is declared as a function, only radial-gradient() . There are also basic values: this is the shape of the radial gradient (circle - circle or ellipse - ellipse), the initial and final color. The syntax is as follows:

If you do not specify a shape, then the default will be an ellipse.

Also, the center position of the gradient is set by default; it can be changed. The position can be specified using commands (top, bottom, left, right and center), as well as their combinations, or specified in percentages or pixels.

Command combinations:

• Center at the top - top - 50% 0%;
• In the upper left corner - left top - 0% 0%;
• In the upper right corner - right top - 100% 0%;
• In the center - center - 50% 50%;
• Left center - left center - 0% 50%;
• Right center - right center - 100% 50%;
• Bottom center - bottom - 50% 100%;
• In the lower left corner - left bottom - 0% 100%;
• In the lower right corner - right bottom - 100% 100%.

Here's an example with percentages:

First axis value X second in U.

You can also set the size of the radial gradient. The size is indicated with a space after the gradient shape. Apply by default farthest-corner(to the far corner). The calculation is carried out from the central point of the gradient to:

To better understand this, let's look at an example. An elliptical shaped gradient with a white starting and blue ending color:

The size is calculated from the distance to the near sides, it is obvious that the top is closer along the axis Y and left along the axis X.

And now to the far sides:

The result, as they say, is obvious. The size is calculated from the distance to the far sides.

In radial as well as linear gradients, stop positions can be used for color. I would also like to note that if you need to achieve color transparency, you should use rgba.

The alpha channel, the last one and equal to 0.2, indicates that only 20% of 100% of the color is used.

In both types CSS3 gradient You can use not two, but several colors.

For both types, repeating colors can be used. That is, a cycle is formed from these values. Repeating gradient functions, repeating-linear-gradient() for linear and repeating-radial-gradient() for radial.

0% , #FFAE00 100% ) ; /* for Firefox */
background-image : -ms-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* for IE 10+ */
background-image : -o-linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* for Opera */
background-image : linear-gradient(top , #FF5A00 0% , #FFAE00 100% ) ; /* standard syntax */
}

div(
filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= #33FF5A00 , endColorstr= #33FFAE00 ) ;
}

Where 33 right after the hash is the percentage of color saturation.

I hope that the article was useful to you, and that the topic discussed was fully covered.

To stay up to date with the latest articles and lessons, subscribe to

Gradient - filling a selected area with a sequence of color shades with smooth transitions between them. A gradient is used to display a smooth transition between two or more specified color shades. Gradient example:

Previously, background images were used to create a gradient effect. Now you can use CSS3 to create a gradient background. Elements with CSS3 gradients look better when zoomed in than their plug-in background image counterparts, since the gradient is generated by the browser directly to the specified area.

Note that the CSS gradient is a browser-generated background image, not a background color, so it is defined as a value background-image properties. This means that the gradient can be specified not only as the value of the background-image property, but also anywhere you can insert a background image, for example in list-style-image And background.

CSS3 defines two types of gradients:

• Linear Gradient(Linear Gradient) - a smooth transition from color to color in a straight line.
• Radial Gradient(Radial Gradient) - a smooth transition from color to color from one point in all directions.

Linear Gradient

A linear gradient extends in a straight line, showing a smooth transition from one shade of color to another. A linear gradient is created using the linear-gradient() function. The function creates an image that is a linear gradient between the specified shades of colors. The size of the gradient corresponds to the size of the element it is applied to.

The linear-gradient() function takes the following comma-separated arguments:

• The first argument is the degree of the angle or keywords that define the direction angle of the gradient line. Optional argument.
• A comma-separated list of two or more colors, each of which can be followed by a stop position.

The simplest linear gradient requires only two arguments specifying the start and end colors:

Div ( background-image: linear-gradient(black, white); width: 200px; height: 200px; ) Try »

Passing two arguments to the function sets a vertical gradient with the starting point at the top.

The direction of the gradient line can be determined in two ways:

Using degrees As the first argument, you can pass the degree of the angle of the gradient line, which determines the direction of the gradient, for example, the angle 0deg (short for degree - degree) defines the gradient line from the bottom border of the element to the top, the angle 90deg defines the gradient line from left to right and etc. Simply put, positive angles represent clockwise rotation, negative angles represent counterclockwise rotation. Using Keywords The keywords "to top", "to right", "to bottom" or "to left" can also be passed as the first argument, these represent the angles of the gradient lines "0deg" "90deg" "180deg" "270deg" respectively.

The angle can also be set using two keywords, for example, to top right - the gradient line is directed to the upper right corner.

An example of a gradient specified in different directions:

Div ( margin: 10px; width: 200px; height: 200px; float: left; ) #one ( background-image: linear-gradient(to left, black, red); ) #two ( background-image: linear-gradient( to top left, black, red); #three ( background-image: linear-gradient(65deg, black, yellow); ) Try »

As mentioned, a linear gradient can include a list of more than two colors, separated by a comma, and the browser will distribute them evenly across the entire available area:

Div ( margin: 10px; width: 200px; height: 200px; float: left; ) #one ( background-image: linear-gradient(to right, red, blue, yellow); ) #two ( background-image: linear- gradient(to top left, blue, white, blue ) Try »

After a color, you can specify a stop position for it, which determines the location of the color (where one color begins to transition into another) relative to the starting and ending points of the gradient. The stop position is specified using CSS supported units or percentages. When using percentages, the position stop position is calculated depending on the length of the gradient line. A value of 0% is the starting point of the gradient, 100% is the ending point.

Div ( margin: 10px; width: 200px; height: 200px; float: left; ) #one ( background-image: linear-gradient(to top right, blue, white 70%, blue); ) #two ( background-image : linear-gradient(to right bottom, yellow 10%, white, red, black 90%);) #three ( background-image: linear-gradient(to right, black 10%, yellow, black 90%); ) Try »

The color value can be specified in various ways, for example: specify the color name, use hexadecimal values(HEX), using the syntax RGB(RGBA) or HSL(HSLA). For example, using a gradient with transparency can be used in combination with a background color or image underneath the gradient to create interesting visual effects:

Div ( margin: 10px; width: 300px; height: 100px; background-color: green; ) #one ( background: linear-gradient(to left, rgb(255,255,0), rgba(255,255,0,0)); ) #two ( background: linear-gradient(rgb(255,255,255), rgba(255,255,255,0)); )