CSS gradients are a special type of images made of a smooth transition between two or more colors progressively. These are generated dynamically and hence replacing the need for traditional raster image files.
There are two types of gradients:
Linear Gradients
The linear-gradient() CSS function creates a transition along a straight line.
The repeating-linear-gradient() function is used to repeat linear gradients.
Syntax
1 | linear-gradient(<angle | to side-or-corner>, <color-stop>) |
where <side-or-corner> can have values left, right, top, bottom or the combination(eg. bottom right) to make it diagonal which are equivalent to the angles 270º, 90º, 0º, 180º and <color-stop> is the list of color stops with an optional stop position in percentage or length along the gradient axis.
By default, the linear gradient is from top to bottom.
Radial Gradients
The radial-gradient() CSS function creates a transition radiating from an origin which can be a circle or ellipse.
Syntax
1 | radial-gradient( <circle | ellipse> <length | percentage> <extent-keyword> at <position>, <color-stop>) |
where <extent-keyword> can have values closest-side, farthest-side, closest-corner, farthest-corner and <color-stop> is the list of color stops with an optional stop position in percentage or length along the gradient axis. A 0% or a 0 length means the center of the gradient whereas 100% is the intersection of the ending shape with the virtual gradient ray. <color-stop> should have at least two color stops (start-color and last-color).
By default, the radial gradient is evenly spaced, the shape is an ellipse, the position is center and the extent-keyword is farthest-corner.
The repeating-radial-gradient() function is used to repeat radial gradient.
To create fading effects, CSS gradients provides transparency which can be added by the rgba() function to define the color stops. The last parameter in the rgba() function is used to define transparency whose value ranges from 0 (full transparency) to 1 (no transparency).