A radial gradient is created using the background or background-image property with the radial-gradient parameter. In the simplest case, to set a radial gradient you only need two parameters: the start and end color. By default, the starting point is located in the center. Example 1 shows how to create something resembling a ball using a radial gradient and rounded corners.
Example 1: Gradient
Gradient
The result of this example is shown in Fig. 1. Please note that the example works correctly in IE10 and Opera 12, early versions These browsers do not support radial gradients, and does not work in Safari 5.1, which requires the -webkit prefix.
Rice. 2. Radial Gradient
The starting point of the gradient can be set anywhere in the element; for this purpose, its position is first specified.
The position of a point is written similarly to the values of the background-position property, using keywords or available units of measurement such as pixels or percentages; Below are possible combinations.
at top left = at left top = at 0% 0% (in left top corner);
at top = at top center = at center top = at 50% 0% (top center);
at right top = at top right = at 100% 0% (in the upper right corner);
at left = at left center = at center left = at 0% 50% (left and center);
at center = at center center = at 50% 50% (center) is the default value;
at right = at right center = at center right = at 100% 50% (right and center);
at bottom left = at left bottom = at 0% 100% (in the lower left corner);
at bottom = at bottom center = at center bottom = at 50% 100% (bottom center);
at bottom right = at right bottom = at 100% 100% (in the lower right corner).
If you set the starting point position for example 1 to at 40px 45px, and make the second color slightly darker (#0076a5), you will get a slightly more realistic ball (Fig. 3).
Rice. 3. Changing the starting point of the gradient
There are two possible forms of radial gradient - circle and ellipse, which differ in their appearance. The default is an elliptical gradient.
The difference between a circular and an elliptical gradient for colors #f9e497 and #ffb60f is demonstrated in Fig. 4.
For an element whose width is equal to its height, as in the ball example, the difference between the gradient types will not be noticeable.
Example 2 shows how to create a circular gradient with a given starting point. To enhance the contrast between colors, three color values are used rather than two.
Example 2: Circular Gradient
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Gradient
This element helps when you are aware of the fact that you have absolutely no idea who can help you and how. It is at this moment that we suggest that no one can help you.
Pay attention to the syntax, if we want to combine a gradient shape with an indication of the starting point, then the keyword circle comes first, and then the position is separated by a space. The result of this example is shown in Fig. 5.
Rice. 5. Circular Gradient
Along with the gradient type, you can also set its size, which depends on the keywords used. The size is written with a space after the gradient type (circle or ellipse).
In table 1 lists possible size values with their description and result for white and black. The code and type are given for circular and elliptical gradients.
Table 1. Keywords for resizing the gradient
Meaning
Code
Description
View
background: radial-gradient(circle closest-side at 30px 20px, #fff, #000);
background: radial-gradient(ellipse closest-side at 30px 20px, #fff, #000);
The shape of the gradient matches the side of the block closest to it.
background: radial-gradient(circle closest-corner at 30px 20px, #fff, #000);
background: radial-gradient(ellipse closest-corner at 30px 20px, #fff, #000);
The shape of the gradient is calculated based on information about the distance to the nearest corner of the block.
background: radial-gradient(circle farthest-side at 30px 20px, #fff, #000);
background: radial-gradient(ellipse farthest-side at 30px 20px, #fff, #000);
The gradient extends to the far side of the block.
farthest-corner
background: radial-gradient(circle farthest-corner at 30px 20px, #fff, #000);
background: radial-gradient(ellipse farthest-corner at 30px 20px, #fff, #000);
The shape of the gradient is calculated based on information about the distance to the far corner of the block,
For the central starting point, the gradients seem to coincide. But the gradients will be different if you set the starting point in a corner. Example 3 uses a value that specifies the starting point in pixels.
Example 3: Gradient size
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Gradient
Content
The result of this example is shown in Fig. 6.
Rice. 6. Using the closest-corner value
Similar to a linear gradient, you can specify multiple colors, set their position, and make sharp transitions between colors. To do this, an arbitrary number of colors is listed separated by commas, and after the color value, separated by a space, there is its position, which can be specified in pixels or percentages. The extreme values 0% and 100% do not need to be written; they are assumed automatically.
Sharp transitions occur when the position of one color coincides with the position of another, as shown in example 4. The difference of one pixel is made to smooth out the transition a little, otherwise it turns out to be a “ladder” of pixels, which does not look very nice.
Example 4. Abrupt transitions
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Gradient
The result of this example is shown in Fig. 7.
Rice. 7. Sharp transitions between different colors
If linear and radial gradients are supplemented with the background-size property, then we get a wide variety of repeating background images that are made without using images.
CSS gradient represents transitions from one color to another.
Gradients are created using the linear-gradient() and radial-gradient() functions.
The gradient background can be set in the background, background-image, border-image and list-style-image properties.
Rice. 1. Gradient line, start and end points and gradient angle
Linear Gradient created using two or more colors that have a direction specified, or gradient line.
If the direction is not specified, the default value is used - top down.
By default, gradient colors are distributed evenly in a direction perpendicular to the gradient line.
Background: linear-gradient(angle/side or slant by keyword(pair of keywords), first color, second color, etc.);
Direction the gradient can be specified in two ways: using tilt angle in degrees deg, the value of which determines the angle of inclination of the line inside the element.
Div ( height: 200px; background: linear-gradient(45deg, #EECFBA, #C5DDE8); )
using keywords to top , to right , to bottom , to left which correspond to a gradient angle of 0deg , 90deg , 180deg and 270deg respectively.
Div ( height: 200px; background: linear-gradient(to right, #F6EFD2, #CEAD78); )
If the direction is specified by a pair of keywords, for example, to top left , then the starting point of the gradient will be located in the opposite direction, in this case the bottom right.
Div ( height: 200px; background: linear-gradient(to top left, powderblue, pink); )
For an uneven distribution of colors, the starting position of each color is indicated through the stop points of the gradient, the so-called color stops. Breakpoints are specified in %, where 0% is the starting point, 100% is the end point, for example:
Radial Gradient differs from linear in that the colors come from one point (the center of the gradient) and are evenly distributed outward, drawing the shape of a circle or ellipse.
Background: radial-gradient(gradient shape/size/center position, first color, second color, etc.);
Gradient shape defined by the keywords circle or ellipse . If no shape is specified, the radial gradient defaults to an ellipse shape.
Div ( height: 200px; background: radial-gradient(white, #FFA9A1); )
Center position specified using the keywords used in the background-position property, followed by the at prefix. If the center position is not specified, the default value at center is used.
Div ( height: 200px; background: radial-gradient(at top, #FEFFFF, #A7CECC); )
A pair of values, specified in % , em , or px length units, can control the size of the elliptical gradient. The first value specifies the width of the ellipse, the second – the height.
Div ( height: 200px; background: radial-gradient(40% 50%, #FAECD5, #CAE4D8); )
Gradient size specified using keywords. The default value is farthest-corner.
div ( height: 200px; background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B); )
Using a radial gradient, you can create realistic three-dimensional shapes, such as balls and buttons.
Ball
div ( width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; background: radial-gradient(circle at 65% 15%, aqua, darkblue); )
Button
.wrap ( height: 200px; padding: 50px 0; background: #cccccc; ) .button ( width: 100px; height: 100px; border-radius: 50%; margin: 0 auto; background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa); box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5); )
Postage Stamp
Using transparent color in gradients, you can create effects like this.
Jpg">
.container ( background: #B7D1D8; padding: 25px; ) .wrap ( background: radial-gradient(transparent, transparent 4px, white 4px,white); padding: 10px; width: 300px; height: 220px; background-size: 20px 20px; background-position: -10px -10px; /*cut off the pattern along the edge*/ margin: 0 auto; ) img ( width: 100%; )
3. Gradient repeat
In addition to linear and radial gradients, there is gradient repeating, which is specified using the repeating-linear-gradient() and repeating-radial-gradient() functions, respectively. A background of repeating gradients looks messy, so it is recommended to start the next color where the previous one stopped, thus creating striped patterns.
Background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1-6.0 */ background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6-12.0 */ background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6-15 */ background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Standard syntax */
5. Gradient and background image combination
By combining a gradient and an image, you can create interesting effects. For a gradient, you need to use translucent colors so that the picture remains visible.
The CSS function radial-gradient() is positioned along its radius, extending outward from the center of the element in a circular or elliptical shape, with the colors of the gradient distributed evenly throughout the element's space.
The principle of creating radial gradients is similar to creating linear gradients (linear-gradient()), for this you just need to specify the starting color - it will be located in the middle of the gradient and the ending color, which will be located at the end of the gradient.
You can find out more about working with gradients in the articles “” and “”. Please note that the articles highlight the nuances of working with old browsers and provide numerous examples.
Browser support
Function
Opera
IExplorer
Edge
radial-gradient()
26.0 10.0 -webkit-
16.0 3.6 -moz-
12.1 11.1 -o-
6.1 5.1 -webkit-
10.0
12.0
CSS syntax:
background-image / background : radial-gradient ([keyword shape (or size)] at position x-axis y-axis , color 1 – stop 1, . . . , color n – stop n);
Form
Elliptical shape is defined by the ellipse value, which is the default (no need to specify it), and the circular shape is defined by the circle value.
Keyword
The gradient is calculated based on the distance to near/far side, or nearest / farthest corner element.
Meaning
Description
closest-side
The gradient is calculated based on the distance to the closest side of the element from its center for circular gradients ( x axis or y axis) and to the nearest parties ( x axis And y axis) if the gradient is in the shape of an ellipse. background-image: radial-gradient(circle closest-side at 60% 60%, plum, black, orange); background-image: radial-gradient(ellipse closest-side at 60% 60%, plum, black, orange);
closest-corner
The gradient is stretched so that it passes through the corner of the element closest to the center (the size is calculated based on the distance to the nearest corner of the element). background-image: radial-gradient(circle closest-corner at 60% 50%, plum, black, orange);
background-image: radial-gradient(ellipse closest-corner at 60% 50%, plum, black, orange);
farthest-side
The gradient is calculated based on the distance to the far side of the element from its center for round gradients ( x axis or y axis) and to the nearest parties ( x axis And y axis) if the gradient is in the shape of an ellipse. background-image: radial-gradient(circle farthest-side at 100% 50%, plum, black, orange);
background-image: radial-gradient(ellipse farthest-side at 100% 50%, plum, black, orange);
farthest-corner
The gradient is stretched so that it passes through the corners of the element farthest from the center (the size is calculated depending on the distance to the far corner of the element). This is the default value.background-image: radial-gradient(circle farthest-corner at 60% 60%, plum, black, orange);
background-image: radial-gradient(ellipse farthest-corner at 60% 60%, plum, black, orange);
Size
Sets the size of the gradient shape. There is no need to specify the circle or ellipse values, prohibited to use keywords if the size is specified. If you specify one value, then it will be regarded by the browser as . If you specify two meanings, That first value will be considered by the browser as horizontal radius, A second meaning How vertical radius for elliptical element.
I draw your attention to the fact that You are not allowed to use percentage values if you specify only one value(radius for round element), when used two meanings(for elliptical gradient) It is allowed to indicate these values as percentages.
Position
The starting position of the radial gradient is determined by the -center keyword, but can be changed using units of length(For example: px or em), percentage values And keywords, which are used in CSS property background-position , it is responsible for the position (position) of the background image.
Meaning
Description
left top left center left bottom right top right center right bottom center top center center center bottom
Sets the position of the image. The first value is the horizontal position and the second value is the vertical position. If you only specify one keyword, the other value will be "center"
x%y%
0% 0%
(this is the default value). In the lower right corner 100% 100%.
If only one value is specified, then the other value will be 50%.
x y
Sets the position of the image. The first value is the horizontal position and the second value is the vertical position. The upper left corner has 0 0.
Values can be in pixels, or other CSS units. If only one value is specified, then the other value will be 50%.
You can share interest And units.
Color
It is allowed to use not only “Predefined colors”, but also any “” - hexadecimal(HEX), RGB/-A and HSL/-A color values.
Stop
Values stopping points (color stops) are specified in length units(For example - px or em) and in percentage values. The breakpoint tells the browser that the radius gradient should reach the given color by the given value and smoothly transition to the next color, if there is one.
Usage example
Let's look at radial gradients of circular and elliptical shapes and see what their difference is in the following practical example:
Example of using radial gradients
In this example, we created four blocks and gave them radial gradients. The upper blocks have elliptical shape, and the lower blocks round shape.
Let's look at an example of positioning a radial gradient.
Example of positioning radial gradients
at 5px 45px
class = "test2" > at 50% top
class = "test3" > at top left
at 0% bottom
class = "test5" > at bottom center
class = "test6" > at 100% 100%
In this example we created six blocks with different shapes of gradients (circular and elliptical) and positioned the gradient for each block differently, indicating the values in pixels, percent and using keywords.
Please note that if a radial gradient is positioned at the center by default, and the element is square in shape, then you will not see the difference between a circular gradient and an ellipse-shaped gradient.
Let's look at an example of using radial gradient stop points:
In this example we created six blocks: three top blocks differ from three lower only by gradient shape, the key points are the same:
First and fourth block – two color gradientRed color, which smoothly turns into green, occupying the remainder of the element.
Second and fifth block – three color gradient, in which 10% of the center is occupied Red color, which smoothly turns into green, with a stopping point of 50%, it in turn smoothly transitions to blue, which takes up the rest of the element.
Third and sixth block – three color gradient, in which 50% of the center is occupied Red color, which smoothly turns into green, with a stopping point of 85%, it in turn smoothly transitions into blue, which takes up the entire remaining small part of the element.
Let's look at how to control the size of a radial gradient in CSS.
Example of sizing for radial gradients
In this example, we created three blocks:
First block- we indicated one value 50px , which was interpreted by the browser as radius for circular gradient. Specified for gradient 7 colors. Notice that the outermost color fills the remaining area.
Second block- we indicated two meanings in percentages : first value - horizontal radius, A second meaning - vertical radius for an elliptical gradient. Specified for gradient 8 colors. Please note that we specified white as the final color, which filled the remaining area(one option is to leave only the gradient shape).
Third block- we indicated two meaningsin length units (px And em): first value - horizontal radius, A second meaning - vertical radius for an elliptical element. Specified for gradient 7 colors.
Radial gradients are rendered differently than linear ones. If linear colors are located perpendicular to the line that sets the direction, then in radial colors diverge from a given center, and the gradient can take the shape of a circle or ellipse.
For the simplest gradient, it is enough to set only the colors:
Background: radial-gradient(gold, orangered);
By default, the center of the gradient is in the center, the gradient has the shape of an ellipse:
In addition to colors, you can set the gradient's shape, position, and size. The parameters are combined and behave more complexly than in linear gradients.
Form(the final shape of the gradient) can be a circle or an ellipse. The default is an ellipse, the gradient tends to take up all the free space of the element, stretching out if necessary.
For the gradient to have the shape of a circle, this must be specified explicitly using the circle keyword.
If the shape is not specified, but the size is specified, one value specifies the radius of the circle; if there are two values, the gradient takes the shape of an ellipse. If dimensions are present, explicitly specifying the gradient shape is ignored.
Position determines where it will be located center gradient. The same keywords are used as for linear gradient, but with the at prefix: at top , at right , at bottom , at left and at center are the default values.
They can also be combined to position the gradient on a given side, for example: at right top - in the upper right corner.
Below you can see how the different positions work:
First square code:
Background: radial-gradient(at top left, purple, crimson, orangered, gold);
You can also set the exact position of the gradient, for example at 20% 50% or at 10px 150px .
Size determines the dimensions of the final gradient shape. For elliptical gradients, values can be specified as percentages, but for circular ones - not.
If one value is specified, it is considered the radius of the circular gradient. If two values are specified, the first is considered the horizontal radius of the ellipse, the second is considered the vertical radius.
Below are examples of circular and elliptical gradients. The shape of the figure is determined by the given dimensions:
You can also use keywords:
closest-side - the gradient ends at the border of the element closest to the center of the gradient. If it's an ellipse, the gradient touches all the borders of the element. farthest-side - the gradient ends at the far border of the element. If it's an ellipse, the gradient touches all the borders of the element. closest-corner - The final shape is stretched so that it passes through the corner of the element closest to the center of the gradient. If the final shape is an ellipse, the gradient is stretched across the entire shape. With this parameter, the gradient fills the entire shape, partially extending beyond its boundaries. farthest-corner - similar to closest-corner , only the end shape goes through the corner farthest from the center of the gradient. Default value.
Added an at bottom position to some gradients to make the code's action easier to see:
A radial gradient can also be repeated - this is repeating-radial-gradient .
As with a linear gradient, a repeating gradient doesn't render very neatly.
By combining several backgrounds with different parameters you can get amazing things:
If you use relative units (em, %) rather than absolute ones (px) when creating patterns, the size of the resulting patterns can then be easily adjusted by changing only the font size.
Gradient background
CSS gradients allow you to display smooth transitions between two or more specified colors.
CSS defines two types of gradients:
Linear gradients (goes down/up/left/right/diagonally)
Radial gradients (defined by their center)
CSS linear gradients
To create a linear gradient, you must define at least two color stops. Color stops are the colors you want to make smooth transitions between them. You can also specify a starting point and direction (or angle) along with a gradient effect.
If you want more control over the direction of the gradient, you can define an angle rather than predefined directions (bottom, top, right, left, down right, etc.).
Note:Internet Explorer 9 and earlier versions do not support gradients.
"/> View demo in the editor
Using transparency
CSS gradients also support transparency, which can be used to create fading effects.
To add transparency, we use the RGBA() function to define color stops. The last parameter in the RGBA() function can be a value between 0 and 1, and it determines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).
The following example shows a linear gradient starting from the left. It starts out completely transparent, moving to a full red color:
Rice. 1. Gradient line, start and end points and gradient angle 
