When we talk about gradients, it "s worth beginning with the fact that gradients are an image replacement in CSS. That" sa fancy way of saying that creating a gradient in CSS provides the browser with instructions for painting an image on the screen rather than you providing the browser with the source URL of a file you created in an image editing application, like Photoshop or Sketch. It "s a native CSS way for doing the same thing in code and, as such, gradients are included in the CSS Image Values ​​and Replaced Content specification.

You can see how that gradient assumes the shape is ellipse. That "s because the element itself is not a perfect square. In that case, it would have assumed a circle instead. Pretty smart! Here" s what would happen if we had explicitly declared circle as the shape value:

Gradient (background-image: radial-gradient (circle, yellow, # f06d06);)

Notice the gradient is circular, but only fades all the way to the ending color along the farthest edge. Now we can explicitly declare the position value to ensure that the fade ends by the "closest-side" of the shape instead, like this:

Gradient (background-image: radial-gradient (circle closest-side, yellow, # f06d06);)

The possible values ​​there are: closest-corner, closest-side, farthest-corner, farthest-side. You can think of it like: "I want this radial gradient to fade from the center point to the __________, and everywhere else fills in to accommodate that."

A radial gradient doesn "t have to start at the default center either, you can specify a certain point by using" at ______ "as part of the first parameter, like:

Gradient (background-image: radial-gradient (circle at top right, yellow, # f06d06);)

I "ll make it more obvious here by making the example a square and adjusting a color-stop:

Browser Support

Browser support for radial-gradient () is largely the same as. The exception is a very old version of Opera. Right when they started supporting gradients they only accounted for linear and not radial.

But similar to linear-gradient (), if your browser support needs to go super deep, then you might consider using or a similar tool that handles vendor prefixing for you rather than having to manage those yourself.

This browser support data is from

Rice. 1. Radial and linear gradient

A radial gradient is created using the background or background-image property.

Syntax

background-image: radial-gradient ([circle ||<радиус>] [at<позиция>]? , | [ellipse || [<радиус> | <проценты>] (2)] [at<позиция>]? , | [[circle | ellipse] ||<размер>] [at<позиция>]? , | at<позиция> , <цвет> [ , <цвет> ]*)

Designations

	Description	Example
<тип>	Indicates the type of the value.	<размер>
A && B	The values ​​must be displayed in the order shown.	<размер> && <цвет>
A | B	Indicates that only one of the suggested values ​​should be selected (A or B).	normal | small-caps
A || B	Each value can be used alone or in conjunction with others in any order.	width || count
	Groups values.	[crop || cross]
*	Repeat zero or more times.	[,<время>]*
+	Repeat one or more times.	<число>+
?	The specified type, word or group is optional.	inset?
(A, B)	Repeat at least A, but no more than B times.	<радиус>{1,4}
#	Repeat one or more times, separated by commas.	<время>#

The values

circle A radial gradient of a circular shape. ellipse Creates an elliptical gradient. This form is set by default.<радиус>The radius of the gradient in CSS units. One value indicates the radius of the circle, two values ​​indicate the radius of the ellipse along the x-axis and its radius along the y-axis. If no radius is explicitly specified, the gradient will fill the entire background of the element.<позиция>

Specifies the starting point where the gradient originates. Point position is written similarly to background-position values ​​using keywords or available units such as pixels or percentages; below are possible combinations.

• top left = left top = 0% 0% (in the upper left corner);
• top = top center = center top = 50% 0% (center top);
• right top = top right = 100% 0% (in the upper right corner);
• left = left center = center left = 0% 50% (left and center);
• center = center center = 50% 50% (centered) is the default;
• right = right center = center right = 100% 50% (right and centered);
• bottom left = left bottom = 0% 100% (in the lower left corner);
• bottom = bottom center = center bottom = 50% 100% (bottom center);
• bottom right = right bottom = 100% 100% (bottom right corner).

<цвет>It is a color value (see color) followed by an optional color position relative to the gradient axis, it is specified as a percentage from 0% to 100% or in any other suitable CSS units.<размер>Sets the size of the gradient. Table 1 lists the possible size values ​​with their description and the result for white and black. Code and view given for circular and elliptical gradients. Tab. 1. Keywords for changing the size of the gradient

Meaning	Code	Description	View
closest-side	background: radial-gradient (circle closest-side at 30px 20px, #fff, # 000); background: radial-gradient (closest-side at 30px 20px, #fff, # 000);	The gradient coincides with the closest side of the block (for a circle) or simultaneously coincides with the nearest horizontal and vertical sides (for an ellipse).
	background: radial-gradient (circle closest-corner at 30px 20px, #fff, # 000); background: radial-gradient (closest-corner at 30px 20px, #fff, # 000);	The shape of the gradient is calculated based on the distance information to the closest corner of the block.
	background: radial-gradient (circle farthest-side at 30px 20px, #fff, # 000); background: radial-gradient (farthest-side at 30px 20px, #fff, # 000);	Similar in effect to closest-side, but the gradient extends to the far side of the box.
farthest-corner	background: radial-gradient (circle farthest-corner at 30px 20px, #fff, # 000); background: radial-gradient (farthest-corner at 30px 20px, #fff, # 000);	The shape of the gradient is calculated based on the distance information to the far corner of the block,

Example

This element helps when you are aware of the fact that you absolutely do not understand who and how can help you. It is at this moment that we suggest that no one can help you.

The result of this example is shown below.

Note

Chrome prior to 26, Safari prior to 6.1 and Android prior to 4.4 support -webkit-radial-gradient ().

Opera prior to version 12.10 supports -o-radial-gradient ().

Firefox up to version 16 supports -moz-radial-gradient ().

All prefixed properties do not use the at keyword when specifying the position of the starting point of the gradient.

Specification

Each specification goes through several stages of approval.

• Recommendation - This specification has been endorsed by the W3C and is recommended as a standard.
• Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it meets its objectives, but the help of the developer community is required to implement the standard.
• Proposed Recommendation ( Suggested recommendation) - At this point, the document is submitted to the W3C Advisory Council for final approval.
• Working Draft - A more mature version of the draft after discussion and revision for community review.
• Editor "s draft ( Editorial draft) - a draft version of the standard after editing by the project editors.
• Draft ( Draft specification) is the first draft of the standard.

CSS Gradient represents transitions from one color to another.

Gradients are created using the linear-gradient () and radial-gradient () functions.

A gradient background can be set in the background, background-image, border-image, and list-style-image properties.

How to make a gradient in CSS

Browser support

IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Linear-gradient ()

Rice. 1. Gradient line, start and end points and angle of the gradient

Linear Gradient is created using two or more colors for which a direction is specified, or gradient line.

If direction is not specified, the default is used - top down.

The default gradient colors are distributed evenly in a direction perpendicular to the gradient line.

Background: linear-gradient (angle / side or slope using keyword (keyword pairs), first color, second color, etc.);

Direction gradient can be specified in two ways:
using the tilt angle in degrees deg, the value of which determines the angle of the line within the element.

Div (height: 200px; background: linear-gradient (45deg, #EECFBA, # C5DDE8);)

using keywords to top, to right, to bottom, to left, which correspond to the angle of the gradient equal to 0deg, 90deg, 180deg, and 270deg, respectively.

Div (height: 200px; background: linear-gradient (to right, # F6EFD2, # CEAD78);)

If the direction is specified with a pair of keywords, for example, to top left, then the starting point of the gradient will be in the opposite direction, in this case bottom right.

Div (height: 200px; background: linear-gradient (to top left, powderblue, pink);)

For uneven distribution of colors, the starting position of each color is indicated through the gradient stop points, the so-called color stops. Breakpoints are set in%, where 0% is the start point, 100% is the end point, for example:

Div (height: 200px; background: linear-gradient (to top, # E4AF9D 20%, # E4E4D8 50%, # A19887 80%);)

For a clear distribution of color stripes, each subsequent color must start from the stopping point of the previous color:

Div (height: 200px; background: linear-gradient (to right, # FFDDD6 20%, # FFF9ED 20%, # FFF9ED 80%, #DBDBDB 80%);)

2. Radial-gradient ()

Radial gradient differs from linear in that the colors come out of 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 / center size / position, first color, second color, etc.);

Gradient shape defined by the keywords circle or ellipse. If no shape is specified, the default radial gradient is elliptical.

Div (height: 200px; background: radial-gradient (white, # FFA9A1);)

Center position set using keywords used in the background-position property, appended with the at prefix. If no center position is specified, the default is at center.

Div (height: 200px; background: radial-gradient (at top, #FEFFFF, # A7CECC);)

A pair of values, specified in%, em, or px length units, controls the size of the elliptical gradient. The first value is the width of the ellipse, the second is the height.

Div (height: 200px; background: radial-gradient (40% 50%, # FAECD5, # CAE4D8);)

Gradient size specified using keywords. The default is farthest-corner (to the far corner).

div (height: 200px; background: radial-gradient (circle farthest-corner at 100px 50px, # FBF2EB, # 352A3B);)

With the help of a radial gradient, you can create realistic 3D shapes such as balls, 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 a transparent color in gradients, you can create the following effects.

Jpg ">