Css gradients. Linear Gradient
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 CSS gradient is background image created by the browser, but not background color so it is defined as the value of the background-image property. 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, such as list-style-image and background .
CSS3 defines two types of gradients:
- Linear Gradient (Linear Gradient) - 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, so 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 different ways, for example: specify the color name, use hexadecimal values (HEX), using RGB (RGBA) or HSL (HSLA) syntax. 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)); )
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. Majority modern browsers understands 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 they work different directions stretched 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 an important part- 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 is also important to know that keyword transparent 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 provide the greatest opportunities for creating backgrounds of varying degrees of complexity without using images at all. You can use gradients to create complex and interesting patterns, but that’s a completely different topic.
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:
1 | div( |
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 defines initial 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:
div( |
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:
div( |
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:
div( |
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:
div( |
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.
div( |
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.
div( |
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.
div( |
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
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 straight 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(at the bottom).
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 color yellow 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 set it via the at keyword.
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 a powerful tool, considering infinite number options.
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 | Down up. | |
| 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 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 transparent color(transparent keyword), 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 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
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 others won’t have any trouble figuring it out quickly. In general, I highly recommend it.