This blending can occur between colors of the same tone (from light blue to navy blue), colors of two different tones (from blue to yellow), or even between more than two colors (from blue to purple to red to orange).Ĭolor gradients are great for adding depth to an image because of their inherent interaction with light and darkness. What is a color gradient and why should designers use them?Ĭolor gradients, or color transitions, are defined as a gradual blending from one color to another. Here are some awesome background gradient examples that can enhance the UI of your website to the next level.Using a rainbow gradient color palette can add depth and interest to a design.

) Official Syntax of Conic Gradients conic-gradient( = || Official Syntax of Radial Gradients radial-gradient( Official Syntax of Linear Gradients linear-gradient( Here's the official syntax of each type of gradient. Repeating-conic-gradient(): The repeating-conic-gradient() CSS function creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a center point (rather than radiating from the center). The function's result is an object of the data type, which is a special kind of. It's similar to gradient/radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to gradient/repeating-linear-gradient(). Repeating-radial-gradient(): The repeating-radial-gradient() CSS function creates an image consisting of repeating gradients that radiate from an origin. It's similar to gradient/linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. Repeating-linear-gradient(): The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. The result of the conic-gradient() function is an object of the data type, which is a special kind of. Example conic gradients include pie charts and color wheels. Ĭonic-gradient(): The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Radial-gradient(): The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its result is an object of the data type, which is a special kind of. Linear-gradient(): The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Also, you can create repeating gradients with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions. There are three types of gradients: linear (created with the linear-gradient() function), radial (created with radial-gradient() function), and conic (created with the conic-gradient() function). The background-image CSS property is used to declare gradients as a background. CSS gradient provides better control and performance over using an actual image (of a gradient) file. The CSS gradient displays a smooth transition using two or more specified colors.

Light blue gradient