CSS container background 10 color gradient Demo (linear-gradient())

grammar

background: linear-gradient(direction,color-stop1,color-stop2,...);

direction : Specifies the direction (or angle) of the gradient using an angle value.
color-stop1,color-stop2,... : used to specify the start and end colors of the gradient.

NOTE: At least two colors are required.

The first one

background: linear-gradient(to left,#d3959b,#bfe6ba);

to left sets the gradient from right to left , which is equivalent to 270deg .

insert image description here

The second

background: linear-gradient(to right,#d3959b,#bfe6ba);

to right sets the gradient from left to right , equivalent to 90deg .

insert image description here

The third

background: linear-gradient(to top,#d3959b,#bfe6ba);

to top sets the gradient from bottom to top , equivalent to 0deg .

insert image description here

The fourth

background: linear-gradient(to bottom,#d3959b,#bfe6ba);

insert image description here

The fifth

background: linear-gradient(to top right,#d3959b,#bfe6ba);

to right top to right top = to top right , diagonal angle

insert image description here

The Sixth

background: linear-gradient(45deg,#d3959b,#bfe6ba);

There is a slight difference between " to top right and "to top right" (there is no difference when the background is a square).

insert image description here

The seventh

background: linear-gradient(45deg,#d3959b 20%,#bfe6ba);

Specifies the starting color position in percentage. The default value is 0% .

insert image description here

The eighth

background: linear-gradient(to right,#feac5e,#c779d0,#4bc0c8);

insert image description here

Ninth

background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);

insert image description here

The tenth

background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));

insert image description here

rgba uses an opacity of 0.5 .

insert image description here

This is the end of this article about CSS container background 10 color gradient Demo (linear-gradient()). For more related CSS container background color gradient content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<: MySQL isolation level detailed explanation and examples

>>: Share 8 CSS tools to improve web design