It is very important for a designer or a developer to be aware of the top web design trends and standards. Currently, background gradients are widely used in modern websites.
Use these background gradient examples as inspiration for your next CSS design.
Using background gradient css
A CSS gradient displays a smooth transition using two or more specified colors. CSS gradients provide better control and performance over using an actual image file of the gradient that you can create using a tool like Adobe Illustrator. Use the background-image CSS property to declare the gradient as the background.
There are three types of gradients: linear (created with the linear-gradient() function), radial (created with the radial-gradient() function), and conic (created with the conic-gradient() function). You can also create repeating gradients with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions.
The MDN docs define these functions as:
linear-gradient(): The linear-gradient() CSS function creates an image that has a progressive transition between two or more colors along a straight line. The result is an object of data type <gradient> , which is a special type of <image> .
radial-gradient(): The radial-gradient() CSS function creates an image that has a progressive transition between two or more colors that radiate from a single origin. Its shape can be a circle or an ellipse. The result of the function is an object of data type <gradient> , which is of a special type <image> .
cone-gradient(): The cone-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (instead of radiating out from the center). Examples of conic gradients include the pie chart and the color wheel. The result of the conic-gradient() function is an object of the <gradient> data type, which is a special type of <image> .
repeating-linear-gradient(): The repeating-linear-gradient() CSS function creates an image with repeating linear gradients. It is similar to gradient / linear-gradient() and takes the same arguments, but iterates that the color fades infinitely in all directions to cover its entire container. The result of the function is an object of data type <gradient> , which is of a special type <image> .
repeating-radial-gradient(): The repeating-radial-gradient() CSS function creates an image with repeating gradients that radiate out from an origin. It is similar to gradient/radial-gradient() and takes the same arguments, but it repeats the color infinitely in all directions so as to cover its entire container, similar to gradient/repeating-linear-gradient() . The result of the function is an object of data type <gradient> , which is of a special type <image> .
repeating-conic-gradient(): The repeating-conic-gradient() CSS function creates an image that consists of repeating gradients (instead of a single gradient), in which the color transition rotates around a focal point (rather than from the center of the image). of radiation).