Lesson 22: The Linear Gradient of a Box or Element

	The Linear Gradient of a Box or Element

Introduction to Gradient Colors

Instead of one uniform color, you can paint a box or element with a set of transitioning colors. The combination of colors is referred to as gradient. To support this, you can use the background style. The value of this style is given by a call to a function that takes specific arguments.

We tested all linear gradient codes in Internet Explorer, Google Chrome (in both Microsoft Windows and Linux), and Firefox (in both Microsoft Windows and Linux. The results were the same

A Linear Gradient With Two Colors

The linear gradient is a one-directional change of colors. The color can change from one border or corner to another border or corner. To do this, you can call a function named linear-gradient and assign to the background style. The function uses different formulas. One syntax is as follows:

linear-gradient(start-color, end-color);

This color arguments are required. The first color specifies the color by which to start. The second color specifies the ending color. Here is an example:

<html>
<head>
<title>Project Management</title>

<style>
#whole { background: linear-gradient(Navy, LightBlue); }

#head-portion {
    position:   relative;
    top:        0;
    left:       0;
    right:      0;
    height:     2.60em;
    width:      auto;
    text-align: center;
    background: Brown; }

.main-title {
    text-align:  center;
    font-weight: bold;
    color:       Yellow;
    font-size:   0.86cm;
    text-shadow: 0.10cm 0.10cm 0.02cm Black;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif; }

#central {
    position: relative;
    top:      0.05em;
    left:     0;
    height:   auto;
    width:    auto;
    right:    0;
    bottom:   5.5em; }

#bottom-part {
    position:   relative;
    top:        auto;
    left:       0;
    width:      auto;
    right:      0;
    height:     4.5em;
    bottom:     0;
    background: Maroon; }

.description {
    text-align:  justify;
    word-break:  keep-all;
    color:       Yellow;
    font-family: Georgia, Garamond, Times New Roman, serif; }

.references {
    color:       #FFF;
    text-align:  center; }
</style>
</head>
<body id="whole">

<header id="head-portion">
  <p class="main-title">Project Management</p>
</header>

<div id="central">
  <p class="description">A project is an adventure that creates an object or 
  accomplishes a specific purpose. To meet its ends, a project must be described 
  (mentally or written down). It is conducted by one person or a team. It must have 
  a begining. Although it should have an end, the majority of projects do not. A 
  project can be personal, social, technical,  business-based, or 
  government-oriented.</p>

  <p class="description">Project management is the process by which a project is 
  conducted from begining to end, or until it is suspended, as it happens to 
  many projects. Project management involves planing the adventure, gathering the 
  appropriate team, getting or designing the necessary resources, conducting the 
  project, overviewing the project based on its defined scope, and ending it.</p>
</div>

<footer id="bottom-part">
  <p class="references">About PM | Types of Projects | Training | Resources</p>
  <p class="references">Copyright &copy; 2015</p>
</footer>

</body>
</html>
<style>

This would produce:

The Gradient Color of a Box

The above code applied the color gradient to the whole page. If you want, you can apply the gradient color to only a box. Here is an example:

<html>
<head>
<title>Project Management</title>

<style>
#whole { background-color: AntiqueWhite; /*linear-gradient(Navy, LightBlue);*/ }

#head-portion {
    position:   relative;
    top:        0;
    left:       0;
    right:      0;
    height:     2.60em;
    width:      auto;
    text-align: center;
    background: Brown; }

.main-title {
    text-align:  center;
    font-weight: bold;
    color:       Yellow;
    font-size:   0.86cm;
    text-shadow: 0.10cm 0.10cm 0.02cm Black;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif; }

#central {
    background: linear-gradient(Navy, LightBlue);
    position:   relative;
    top:        0.05em;
    left:       0;
    height:     auto;
    width:      auto;
    right:      0;
    bottom:     5.5em; }

#bottom-part {
    position:    relative;
    top:         auto;
    left:        0;
    width:       auto;
    right:       0;
    height:      4.5em;
    bottom:      0;
    background:  Maroon; }

.description {
    text-align:  justify;
    word-break:  keep-all;
    color:       Yellow;
    font-family: Georgia, Garamond, Times New Roman, serif; }

.references {
    color:      #FFF;
    text-align: center; }
</style>
</head>
<body id="whole">

<header id="head-portion">
  <p class="main-title">Project Management</p>
</header>

<div id="central">
  <p class="description">A project is an adventure that creates an object or 
  accomplishes a specific purpose. To meet its ends, a project must be described 
  (mentally or written down). It is conducted by one person or a team. It must have 
  a begining. Although it should have an end, the majority of projects do not. A 
  project can be personal, social, technical,  business-based, or 
  government-oriented.</p>

  <p class="description">Project management is the process by which a project is 
  conducted from begining to end, or until it is suspended, as it happens to 
  many projects. Project management involves planing the adventure, gathering the 
  appropriate team, getting or designing the necessary resources, conducting the 
  project, overviewing the project based on its defined scope, and ending it.</p>
</div>

<footer id="bottom-part">
  <p class="references">About PM | Types of Projects | Training | Resources</p>
  <p class="references">Copyright &copy; 2015</p>
</footer>

</body>
</html>

This would produce:

The Gradient Color of a Box

A Linear Gradient With an Angle

As you can see from these previous screenshots, the default gradient direction is from top to bottom. If you want a different direction, the linear-gradient() function uses another syntax that is used to specify the direction of the gradient:

linear-gradient(angle, start-color, end-color);

The direction is provided as an angle:

0deg means that the gradient would move from bottom to top. Here is an example:

<html>
<head>
<title>Project Management</title>

<style>
#whole { background: AntiqueWhite; /*linear-gradient(Navy, LightBlue);*/ }

#head-portion {
    position:   absolute;
    top:        0;
    left:       0;
    right:      auto;
    height:     4.60em;
    width:      100%;
    text-align: center;
    background: Brown; }

.main-title {
    text-align:  center;
    font-weight: bold;
    color:       Yellow;
    font-size:   0.86cm;
    text-shadow: 0.10cm 0.10cm 0.02cm Black;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif; }

#central {
    background: linear-gradient(0deg, Navy, LightBlue);
    overflow:   auto;
    position:   absolute;
    top:        4.65em;
    left:       0;
    height:     auto;
    width:      auto;
    right:      0;
    bottom:     5.5em; }

#bottom-part {
    position:   absolute;
    top:        auto;
    left:       0;
    width:      auto;
    right:      0;
    height:     5.5em;
    bottom:     0;
    background: Maroon; }

.description {
    text-align:  justify;
    word-break:  keep-all;
    color:       Yellow;
    font-family: Georgia, Garamond, Times New Roman, serif; }

.references {
    color:       #FFF;
    text-align:  center; }
</style>
</head>
<body id="whole">

<header id="head-portion">
  <p class="main-title">Project Management</p>
</header>

<div id="central">
  <p class="description">A project is an adventure that creates an object or 
  accomplishes a specific purpose. To meet its ends, a project must be 
  described (mentally or written down). It is conducted by one person or a 
  team. It must have a begining. Although it should have an end, the majority 
  of projects do not. A project can be personal, social, technical, 
  business-based, or government-oriented.</p>

  <p class="description">Project management is the process by which a project 
  is conducted from begining to end, or until it is suspended, as it happens 
  to many projects. Project management involves planing the adventure, 
  gathering the appropriate team, getting or designing the necessary resources, 
  conducting the project, overviewing the project based on its defined scope, 
  and ending it.</p>
</div>

<footer id="bottom-part">
  <p class="references">About PM | Types of Projects | Training | Resources</p>
  <p class="references">Copyright &copy; 2015</p>
</footer>

</body>
</html>
<style>

This would produce:

The Gradient Color of a Box

180deg means that the gradient would move trom top to bottom. It may appear as follows:
90deg means that the gradience will move from right to left. It may appear as follows:
270deg means that the gradience will move from left to right. It may appear as follows:
Otherwise, the gradient angles increase in the clockwise direction

A Linear Gradient With Three Colors

Instead of one color, you can specify as many colors as you want. For example, you can create a linear gradient that takes three colors. In this case, the linear-gradient() function that uses three colors follows the following syntax:

linear-gradient(color-1, color-2, color-3);

Provide the colors separated by commas. Here is an example:

<html>
<head>
<title>Linguistics</title>

<style>
body { margin: 0;
 background: linear-gradient(180deg, Green, Red, Yellow); }

.main-title {
    font-weight: bold;
    color:       Yellow;
    font-size:   0.86cm;
    text-align:  center;
    text-shadow: 0.18cm 0.18cm 0.02cm Black;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif; }

p { color: Yellow; }

p {
    text-align:  justify;
    word-break:  keep-all;
    font-family: Georgia, Garamond, Times New Roman, serif;
}
</style>
</head>
<body>

<p class="main-title">Linguistics</p>

<p>Linguistics is the study of one or a family of languages. Linguistics studies the 
science, the technology, the mechanical, and physical aspects that rule a language. 
Linguistics scientifically describes the sound produced when a particular language 
is spoken, how, and usually why a certain sound is produced. Linguistics does not 
present or boast the beauties of a language, but linguistics can present some 
lacking features or describes some strengths. These aspects would lead to bias, 
deceiving the purpose of this science</p>

<p>Linguistics studies all aspects of a language, from humans, from animals, or 
towards objects. When it comes to humans, linguistics studies the characteristics 
by which the people who speak a certain language speak, or speak it, that way. 
Linguistics is interested in any form of human communication, from one person to 
another person.</p>

</body>
</html>

This would produce:

The Gradient Colors of a Box

A linear gradient with two colors is used to create an effect of one color that transitions to another color. If you want to create a bump effect, provide three arguments to the linear-gradient() funtion where the first and the third arguments are the same color. Here is an example:

<html>
<head>
<title>Social Science: Philosophy</title>
<style type="text/css">
.main-title
{
    font-weight: bold;
    color:       Black;
    font-size:   1.26cm;
    text-align:  center;
    text-shadow: 0.14cm 0.14cm 0.12cm Silver;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif;
}
#title-banner, #central, #bottom-banner { width: 600px }

.description
{
    font-size:  12pt;
    text-align: justify;
    font-family: Calibri, AvantGarde BkBT, Arial, sans-serif;
}
#navigator { width: 600px }
.link-box
{
    float:      left;
    text-align: center;
}
#navigator a:link, #navigator a:active,
#navigator a:visited, #navigator a:hover
{
	display:  inline-block;
    height:          35px;
    text-decoration: none;
    width:           90pt;
    line-height:     2.00em;
    outline:         1pt solid #99F;
    font-family:     "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#navigator a:link
{
    color:            #FFCC00;
    background: linear-gradient(#00254A, #8CC6FF, #00254A);
}
#navigator a:active  { color: #999966 }
#navigator a:visited { color: #FF99FF }
#navigator a:hover
{
    color:      #FFFF99;
    background: linear-gradient(#004080, #3399FF, #004080); 
}
#navigator p
{
    width: 90pt;
    color: #FFFF99;
}

.philosophic {
    display: table;
    outline: 3pt gray groove;
}
.philo-heading { display: table-row }
.philo-field, .philo-topic, .philo-issues,
.philo-value1, .philo-value2
{
    height:      20pt;
    line-height: 20pt;
    display:     table-cell
}
.philo-field, .philo-topic, .philo-issues
{
    background-color: #333333;
    outline: 1pt solid Gray;
}
.philo-field   { width: 110pt }
.philo-topic   { width: 70pt  }
.philo-issues2 { width: 200pt }
.philo-title
{
    height:      26pt;
    line-height: 26pt;
    font-weight: bold;
    color:       white;
    font-family: "Comic Sans MS", Tahoma, sans-serif;
}
.philo-value2 { background-color: Silver;
    outline:          1pt solid #FFF;
 }

#bottom-banner
{
    background: linear-gradient(#004080, #0066FF);
    outline:          2pt solid #FFBE00;
}
#copyright
{
    line-height: 2.00em;
    text-align:  center;
    color:       #FFCC00;
    outline:     1pt solid orange;
}

#branches, #history, #resources { float: left }
#branches  a:link, #branches  a:active, #branches  a:visited, #branches  a:hover,
#history   a:link, #history   a:active, #history   a:visited, #history   a:hover,
#resources a:link, #resources a:active, #resources a:visited, #resources a:hover
{
    height:      26px;
    font-size:   12pt;
    line-height: 26px;
    text-decoration: none;
    display:  inline-block;
    font-family:     "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
#branches, #branches a:link, #branches a:active,
#branches a:visited, #branches a:hover { width: 170px }
#history, #history a:link, #history a:active,
#history a:visited, #history a:hover { width: 150pt }
#resources, #resources a:link, #resources a:active,
#resources a:visited, #resources a:hover { width: 165pt }
#branches a:link,    #history a:link,    #resources a:link    { color: #FFFF00 }
#branches a:active,  #history a:active,  #resources a:active  { color: #CC99FF }
#branches a:visited, #history a:visited, #resources a:visited { color: #FFCC99 }
#branches a:hover,   #history a:hover,   #resources a:hover
{
    color:   #FFCCFF;
    background-color: #0066CC;
    display:  inline-block;
    outline:  1pt solid #CCFF33;
}
.clearance { clear: left }

</style>
</head>
<body>

<div id="title-banner">
  <p class="main-title">Philosophy</p>
</div>

<div id="navigator">
  <p class="link-box"><a href="index1.htm">Home</a></p>
  <p class="link-box"><a href="research.htm">Research</a></p>
  <p class="link-box"><a href="resources.htm">Resources</a></p>
  <p class="link-box"><a href="aboutus.htm">About Us</a></p>
  <p class="link-box"><a href="contact.htm">Contact Us</a></p>
</div>

<div class="clearance"></div>

<div id="central">
  <p class="description">Philosophy is the study of existense (or being), 
  knowledge (or reasoning), and truth. Philosophy seeks to comprehend what 
  truth is, how to evaluate it, and how it influences thoughts and ethics. 
  Like other social science topics such as sociology or psychology, philosophy 
  examines both personal and crowd behavior but only as they relate to the 
  mind. An example is the thinking process that results in someone taking one 
  action rather than another (another person taking the same action or another 
  person taking a different action). Unlike the other social science fields, 
  philosophy doesn't concentrate on what is good or bad, or what is practical 
  or weird, or on how something should (is supposed to) be. Instead, 
  philosophy delves into the logic and the ethical reasons of what it (such 
  as something or a behavior) is.</p>
  
  <p class="description">Some of the most regular fields of study in philosophy 
  are:</p>
</div>

<div class="philosophic">
  <div class="philo-heading">
    <div class="philo-field philo-title">Philosophic Field</div>
    <div class="philo-topic philo-title">Topic</div>
    <div class="philo-issues philo-title">Issues</div>
  </div>
  <div class="philo-heading">
    <div class="philo-value1">Epistemology</div>
    <div class="philo-value1">Knowledge</div>
    <div class="philo-value1">Truth, perception, belief, justification</div>
  </div>
  <div class="philo-heading">
    <div class="philo-value2">Logic</div>
    <div class="philo-value2">Reason</div>
    <div class="philo-value2">Deduction (deductive reasoning)<br>
    Induction (inductive reseaning)</div>
  </div>
  <div class="philo-heading">
    <div class="philo-value1">Metaphysics</div>
    <div class="philo-value1">Reality</div>
    <div class="philo-value1">Existence, time, causality</div>
  </div>
  <div class="philo-heading">
    <div class="philo-value2">Aesthetics</div>
    <div class="philo-value2">Beauty</div>
    <div class="philo-value2">Art, beauty, taste</div>
  </div>
</div>

<footer id="bottom-banner">
  <div id="branches">
    <p><a href="natural.htm">Natural Philosophy</a><br>
       <a href="physical.htm">Physical Philosophy</a><br>
       <a href="moral.htm">Moral Philosophy</a></p>
  </div>
   
  <div id="history">
    <p><a href="philosophers.htm">Philosophers</a><br>
       <a href="comparisons.htm">Ancient/Contemporary</a><br>
       <a href="majors.htm">Universities</a></p>
  </div>
   
  <div id="resources">
    <p><a href="philosophers.htm">Philosophers</a><br>
       <a href="comparisons.htm">Ancient/Contemporary</a><br>
       <a href="majors.htm">Universities/Colleges/Majors</a></p>
  </div>

  <p id="copyright">Copyright &copy;, 2015</p>
</footer>

</body>
</html>

This would produce:

The Linear Gradient Colors of a Box

A Linear Gradient With Many Colors

A linear gradient can be created with as many colors as possible. In this case, the linear-gradient() function uses the following syntax:

linear-gradient(angle, color-1, color-2, color-n, end-color);

Here is an example that uses 5 colors:

body { background: linear-gradient(180deg, Navy, Red, LightBlue, Maroon, Yellow); }

This would produce:

The Gradient Colors of a Box

The Relative Length of a Gradient Color

When creating a gradient color, if you specify two colors, they split the length of the area they must cover and each color covers half of that length. If you use three colors, each color would cover a third. If you specify 4 colors, each would cover a quarter of the length. You can specify a portion of the length that a color must cover.

The portion or length that a color must cover is provided as a percentage. That is, after specifying the color, put a space, followed by a number and the % symbol. The formula is:

color number%

For example, for a gradient that uses two colors, you may want one of the colors to cover a 5th of the length and the other color would cover the rest. You would express the first color with 20% and the other color with 100%. Here os an example:

<html>
<head>
<title>Sociology</title>

<style>
#central {
    left:       0;
    right:      0;
    bottom:     0;
    height:     auto;
    width:      auto;
    top:        4.80em;
    position:   absolute;
    background: linear-gradient(270deg, Bisque 20%, #400 100%); }

#whole {
    left:       0;
    top:        0;
    width:      auto;
    height:     auto;
    background: Bisque; }

#head-portion {
    position:    absolute;
    top:         0;
    left:        0;
    right:       auto;
    height:      4.80em;
    width:       100%;
    text-align:  center;
    background:  #000; }

.main-title        {
    font-weight: bold;
    color:       Yellow;
    font-size:   0.86cm;
}

.paragraph-title {
    color:     Aqua;
    font-size: 0.62cm; }

.main, .paragraph-title
{
    font-family: Times New Roman, Garamond, Georgia, serif;
}

.description {
    color:       Lime;
    font-family: Georgia, Garamond, Times New Roman, serif;
}
</style>
</head>
<body id="whole">

<header id="head-portion">
  <p class="main-title">Sociology</p>
</header>

<div id="central">
  <p class="paragraph-title">Introduction</p>

  <p class="description">Sociology is in the social science group of academic 
  studies. Sociology is the study of human behavior, the origins of that behavior, 
  and the actual characteristics of such a behavior. Sociology analyzes the 
  person as one but also the influences of the group(s) in which the personal 
  behavior manifests itself.</p>

  <p class="paragraph-title">Sociology and its Environment</p>

  <p class="description">Sociolgy as an academic venture takes many factors in 
  consideration because various aspects shape a personality, from birth to 
  adulthood, from family to career, from opinions to affirmations. The study of 
  sociology considers the person's family, gender, ethnicity, social class, 
  religion, education, health, etc. Sociology also consider various aspects 
  of deviance, law, and societal interactivity.</p>
</div>

</body>
</html>

This would produce:

The Gradient Colors of a Box

The second color doesn't have to cover the whole area left by the first color. As done for the first color, you can make the second color cover only a portion. Here is an example where a gradient of the second color covers only half of the remaining are:

#central {
    left:       0;
    right:      0;
    bottom:     0;
    height:     auto;
    width:      auto;
    top:        4.80em;
    position:   absolute;
    background: linear-gradient(180deg, Bisque 1%, #400 10%); }

This would produce:

The Gradient Colors of a Box

You can use this feature to create a transitioning background. Consider the following example:

<html>
<head>
<title>Social Science Studies</title>

<style>
#head-portion {
    position:   absolute;
    top:        0;
    left:       0;
    right:      auto;
    height:     6.80em;
    width:      100%;
    text-align: center;
    background: linear-gradient(Gray, Black) }

#head-bar {
    position:   absolute;
    top:        4.60em;
    left:       0;
    right:      auto;
    height:     2.20em;
    width:      100%;
    text-align: center;
    background: linear-gradient(180deg, Navy, CornflowerBlue, Navy); }

.main-title         {
    text-align:  center;
    font-weight: bold;
    color:       Navy;
    font-size:   0.86cm;
    text-shadow: 0.08cm 0.08cm 0.2cm White;
    font-family: Bodoni MT Black, Georgia, Times New Roman, serif; }

#central {
    position:    absolute;
    top:         6.80em;
    left:        8.90em;
    height:      auto;
    width:       auto;
    right:       1.20em;
    bottom:      5.5em; }

#studies-left {
    position:   absolute;
    left:       0;
    top:        6.80em;
    width:      4.250em;
    height:     auto;
    bottom:     5.5em;
    background: linear-gradient(90deg, Maroon 0%, BurlyWood 15%);
}
#studies-right {
    position:   absolute;
    left:       4.250em;
    top:        6.80em;
    width:      4.250em;
    height:     auto;
    bottom:     5.5em;
    background: linear-gradient(270deg, Maroon 0%, BurlyWood 15%);
}
.topics-title {
    position:    absolute;
    top:         5.05em;
    left:        0.55em;
    color:       Maroon;
    font-size:   14pt;
    font-family: Comic Sans MS, Helvetica, Arial, sans-serif; }

.topics {
    position:    absolute;
    top:         9.25em;
    left:        1em;
    color:       Yellow;
    font-size:   10pt;
    font-family: Comic Sans MS, Helvetica, Arial, sans-serif; }

#bottom-part   {
    position:   absolute;
    top:        auto;
    left:       0;
    width:      100%;
    right:      0;
    height:     5.5em;
    bottom:     0;
    background: linear-gradient(180deg, Black, Gray); }

.introduction {
    text-align:  justify;
    word-break:  keep-all;
    color:       Black;
    font-family: Georgia, Garamond, Times New Roman, serif; }

.sub-title         {
    text-align:  left;
    color:       Blue;
    font-size:   0.64cm;
    font-family: Georgia, Times New Roman, serif; }

.references {
    color:       #FFF;
    font-weight: bold;
    text-align:  center; }
</style>
</head>
<body>

<header id="head-portion">
  <p class="main-title">Social Science Studies</p>
</header>

<div id="central">

  <p class="sub-title">Introduction</p>

  <p class="introduction">Social sciences cover a wide range of studies that 
  address all types of topics about human beings, their behaviors, their 
  history, their societies, and their environments. Some social science topics 
  are grouped in categories, such as individual or crowd, where studies tend 
  to address the same categorical isssues. Still, social sciences are highly 
  interchangeable. Sometimes.</p>

  <p class="contribution">Social sciences are not strictly confined to the 
  above list. Studies in chemistry borrow concepts from sociology, anthropology, 
  and economy. Mathematics and medicine, that are sometimes said not to be a 
  science, regularly share theories with philosophy, psychology, or criminology. 
  In the same way, it is practically impossible to study computer science, 
  which includes computer languages and application programming, without 
  referring to linguistics.</p>

</div>

<div id="studies-left"></div>
<div id="studies-right"></div>

<p class="topics-title">Topics</p>

<dl class="topics">
  <dt>Sociology
  <dt>Psychology
    <dt>Philosoply
    <dt>Linguistics
    <dt>Communication
    <dt>History
    <dt>Geography
    <dt>Demography
    <dt>Ethnicity
    <dt>Anthropology
    <dt>Archaeology
    <dt>Political Science
    <dt>Law
    <dt>Education
    <dt>Criminology
    <dt>Economy
  </dl>

<footer id="bottom-part">
  <p class="references">Schools | Majors | Minors</p>
  <p class="references">Copyright &copy; 2015</p>
</footer>

</body>
</html>

This would produce:

The Gradient Colors of a Box

If you are using many colors, apply the desired length to each. Here are examples:

#central {
    left:        0;
    right:       0;
    bottom:      0;
    height:      auto;
    width:       auto;
    top:         4.80em;
    position:    absolute;
background: linear-gradient(0deg, Bisque 10%, #400 30%, Blue 50%, Red 100%); }

This would produce:

The Gradient Colors of a Box

A Repeating Linear Background

If you create a linear gradient where the color(s) after the first don't cover 100% of the remaining area, you can ask the browser to keep repeating the gradient scheme to the end of the area. To support this, CSS provides the repeating-linear-gradient() function. Here is an example of calling:

background: repeating-linear-gradient(180deg, Bisque 1%, #400 100%); }

This would produce:

The Gradient Colors of a Box