How to set a ​gradient background in CSS

CSS lets you set the background of your web page using the background-image property. You can add it in the form of a picture or you can customize it. One possible example of a custom-built CSS background could be CSS gradient.

A gradient is a blend of colors in which one color gradually changes into another. Gradient backgrounds were introduced in CSS3 which lets you add gradient backgrounds and also allows you to set the color, shape, and transparency of the gradient through different methods.

CSS has two types of gradients:

• Linear Gradient
• Radial Gradient

Linear Gradient

In a linear gradient, you define at least two colors and a direction in which the color will transition. So, basically you need to pass three parameters:

• Direction: Could be left, right, top or bottom. In addition to these, you can also use diagonal direction or even specify a certain angle in which you want to transit.
• Color1: The first color that will appear on the opposite of the direction that you mentioned. For example, if you specified “right”, this color will appear at the left.
• Color2: This is the transitioning color that will appear at the specified direction.

Syntax

linear-gradient(direction, color1, color2)

Example

Let’s create a linear gradient in which the color yellow transitions into green from right to left.

Tip: rgba() method is used to add transparency in your gradient. The last parameter of this method can be set to any value between 0 and 1 which defines the intensity of transparency where 0 being the highest and 1 being the lowest.

Radial Gradient

In a radial gradient, the color transitions from the center towards the edge of the pages. The parameters that we pass in the radial-gradient() method are almost the same with one addition though. Here, we can also specify the shape of the gradient.

Syntax

radial-gradient(shape size, color1 position, color2 position, ...);

These are all the parameters that you need to pass in a radial-gradient() method:

• Shape: This parameter defines the shape of your gradient, it could be an ellipse or a circle. By default, it is set as an ellipse.
• Size:The value passed in this parameter sets the size of your gradient. Some possible keywords that could be passed here are farthest-corner/side or closest-corner/side.
• Position: This defines the color stops, i.e., a certain color appears till which position. We set the position in percentage where 0% is the center of your gradient and 100% is the edge.

Example

The example below creates a radial gradient starting from grey at 0%, to yellow at 20% to green at 60% and then finally white at 80% till 100%.

Fact: There is a website called CSS Gradient that lets you create gradients of your choice of colors and provides a variety of other customization options!