Assignment029g14

CSS3 allows you to create gradients for your web page.

In order to create a gradient, set the background-image property to linear-gradient. You must also provide a few parameters. For example, the direction (optional) and beginning and ending color.

If your page is short or has no content, use the linear gradient on the html selector in your CSS and use a height of 100%.

In addition to the linear-gradient property, there are other types of gradients and settings. You can get additional info here: css-tricks.com

Guide:

body
{
background-image: linear-gradient(red , blue);
}

Here are a few examples of using CSS gradients. Each div element has a different gradient applied using CSS.

divone

#divone
{
background-image: linear-gradient(to right, green , red);
}

divtwo

#divtwo
{
background-image: linear-gradient(to left, orange , blue);
}

divthree

#divthree
{
background-image: linear-gradient(to top right, yellow , purple);
}

divfour

#divfour
{
background-image: linear-gradient(to bottom right, red , blue);
}

divfive

#divfive
{
/* Notice the negative degree*/
background-image: linear-gradient(-45deg, red , blue);
}

divsix

#divsix
{
/* There are other options*/
background-image: radial-gradient(blue , silver);
}