On this page, we’ll inform you about all the basics related to CSS and CSS3 gradients. Understanding from how its summarization is done by experts, a < gradient > is actually a CSS data type that is a representation of the CSS < image >. It is made up of a progressive transition from one color to the other and comprises of two or more colors. Please be aware that a CSS gradient shouldn’t be confused with the CSS < color >. It is actually an image that doesn’t have any intrinsic dimensions, implying that there is no related size (preferred or natural), nor there is any kind of preferred ratio. The concrete size of this image is meant to match with the element that it is applied to. Delving further into the CSS gradients, there are three kinds as follows:
CSS linear gradients – These are generated by using linear-gradient () function. They feature colors that smoothly fade into another color, along an imaginary line.
CSS radial gradients – These are generated by using the radial-gradient () function. Their definition comes from their center. The farther that a point is from its origin, the farther it is from its original color.
CSS repeating gradients – These are actually radial or linear gradients of fixed size that are repeated as much as required for filling up a particular area.
CSS3 is nothing but the latest standard for the CSS. It has backward compatibility with all the earlier CSS versions. Unlike as in case of the CSS gradients, wherein you make use of images for achieving such effects, CSS3 gradients allow you to display smooth transitions from one color to the other in a manner that both the bandwidth usage and the download times are reduced to the minimum. Additionally, the elements created with the CSS3 gradients have a far better appearance even when zoomed significantly, as these gradients are generated by browsers.
Browser support for the SS3 gradients
CSS3 gradients are supported by all major Internet browsers such as the Internet Explorer, Google, Safari, Opera, Mozilla Firefox and more. Furthermore, the support of CSS3 gradients extends across all the major versions of these web browsers.
Types of CSS3 gradients
CSS3 gradients are basically of two types.
CSS3 linear gradients
These may move downwards, upwards, towards right, towards left or diagonally. You need to define a minimum of two different color stops for creation of a CSS3 linear gradient. These color stops are nothing but the colors that you wish to render smooth transitions between. You’re even allowed to define a direction (or angle) and the starting point, apart from the gradient effect. Following are some different kinds of CSS3 linear gradients you can have:
The default top to bottom CSS3 linear gradient – This one starts from the top. It begins with one color which gradually transitions into another color as it moves towards the bottom.
Left to right CSS3 linear gradient – Quite evident from its name, this one starts from the left hand side. It begins with one color which gradually transitions into another color as it moves towards the right hand side.
Diagonal CSS3 linear gradient – You can achieve a diagonal effect in a CSS3 linear gradient by specification of the vertical and horizontal starting points. So, it is possible for you to have a gradient that begins with one color from the bottom left end and slowly transitions into another color as it moves towards top right end.
Other important effects
It is also possible to achieve certain other important effects in CSS3 linear gradients, such as multiple color stops, a repeating effect, transparency and angles. We’ll go over each one of them briefly:
Repeating CSS3 linear gradient – You can achieve a repeating effect in your CSS3 linear gradient by using the repeating-linear-gradient () function.
Angle effect – It is possible to gain better control over your CSS3 linear gradient’s direction by avoiding the predefined directions (to left, to right, to top, to bottom, to bottom left, to bottom right etc.) and opting for an angle definition instead. The angle can be specified as an angle between a horizontal line and the line of the gradient.
Transparency effect – Another important feature of the CSS3 linear gradients is their support for transparency feature, which if employed effectively can provide some amazing fading effects. To use it effectively you must employ the rgba () function while defining the color stops. The color transparency will be defined by the last parameter of the rgba () function. This parameter can be anywhere from 0 to 1, with 0 indicating complete transparency and 1 indicating complete color (or 0 transparency in other words).
Multiple color stops effect – It’s also possible for you to achieve a CSS3 linear gradient from left to right or top to bottom, with multiple stops in it.
CSS3 radial gradients
The movement of these gradients is defined by their center point. In order to create a CSS3 radial gradient, you must define a minimum of two color stops.
The default CSS3 radial gradient is evenly spaced color stops whose shape is elliptical in nature, position is center and the size is farthest corner. You can even create a CSS3 radial gradient with differently spaced color stops.
Using the shape parameter – By effectively using the shape parameter of the CSS3 radial gradient’s syntax, you can define its shape any way you want. The default value of this particular parameter is ellipse and you can even opt for circle if you need.
Using the size parameter – By effectively using the size parameter of the CSS3 radial gradient’s syntax, you can change its size based on four different values available: closest-side, farthest-side, farthest-corner and closest-corner.
The repeating CSS3 radial gradient
Just like we saw the example of the CSS3 repeating linear gradient, we can also create a CSS3 repeating radial gradient. This can be created by effectively using the repeating-radial-gradient () function.