Assignment029G14 - Gradient Backgrounds

CSS3 allows to create gradients for your web page.

In order to creat a gradient, set the background-images 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 lnear gradient on the html sector 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
{
backgroun-image: linear-gradient(#4BB3F9, #9245D5);
{

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

one

#one
{
background-image: linear-gradient(#00416a,#e4e5e6);
}

two

#two
{
background-image: linear-gradient(to top right, #00416a,#799f0c,#ffe000);
}

three

#three
{
background-image: radical-gradient(#b92b27,#1565c0);
}

four

#four
{
background-image: linear-gradient(to bottom left,#59c173,#5d26c1);
}

five

#five
{
background-image: radical-gradient(circle closest-side,#f12711,#f5af19);
}

six

#six
{
background-image: linear-gradient(-90deg,#dd3e54,#6be585);
}


Cvela-s346@chusd.org