How to create a gradient background color with CSS

0

Using of more than one color in linear or radial is called gradient background.

You can easily apply gradient backgrounds to your web elements.

Linear Gradient

Linear Gradient code with Two color

background:linear-gradient(0deg, rgba(0,130,100,1) 0%, rgba(206,210,32,1) 100%);

Linear Gradient code with Three color

background:linear-gradient(0deg, rgba(0,130,100,1) 0%, rgba(0,142,205,1) 50%, rgba(206,210,32,1) 100%);

Radial Gradient

Radial Gradient code with Two color

background: radial-gradient(circle, rgba(0,130,100,1) 0%, rgba(206,210,32,1) 100%);

Radial Gradient code with Three color

background: radial-gradient(circle, rgba(0,130,100,1) 0%, rgba(0,142,205,1) 50%, rgba(206,210,32,1) 100%);
Picture: Example of Radial Gradient

Leave a Reply