Category: 

What Is a Color Gradient?

Article Details
  • Written By: G. Wiesen
  • Edited By: Shereen Skola
  • Last Modified Date: 04 September 2016
  • Copyright Protected:
    2003-2016
    Conjecture Corporation
  • Print this Article
Free Widgets for your Site/Blog
The atmosphere of Jupiter's moon Io collapses every time it is eclipsed by the planet.   more...

September 29 ,  2008 :  The Dow Jones Industrial Average experienced its largest one-day drop in history.  more...

A color gradient is a type of image that depicts a progression from one color to another in a subtle way. In its simplest form, this type of gradient begins with one color at one end of a line and another color at the other end of that line. From one end to the other, the colors progress and change into each other, this is called a linear gradient or progression. A color gradient can also be created in other ways, such as a circular gradient that changes color from the inside of a circle toward the outside, and more than two colors can also be used.

In general, a gradient refers to a transition between one thing and another, often depicted in visual form by a procession from white to black through a series of shades of gray. A color gradient, however, uses two different colors and depicts a transition between them. Instead of simply demonstrating tones of one color, such as the transition from dark blue to light blue, this type of gradient instead depicts a change involving two distinct colors. A color gradient may have a middle tone of blue and a middle tone of red as the two colors, which change into each other through various tones that become purple between them.

Ad

There are different ways in which a color gradient can be created and depicted, though a linear gradient may be the simplest and most common. This is often designed as a line of colors, though this line can be widened out to become a rectangle with solid colors from one end to the other. At one end of the line or box is one color, and at the other end is another color. Along the line between these two ends, the color gradient is created and depicts the transition between them.

A color gradient can also be created using various shapes, such as a circular gradient. In this type of image, a circle can be depicted with one color at its middle and another color at its outer edge. Between this central point and the outside, a gradient is created to transition between these two colors. This effectively creates a series of rings of color that smoothly pass from one to the next.

More complex gradients can also be created that are designed with more than just two colors. For example, a color gradient can be made in a linear way that has one color at each end and a third color in the middle. This often happens naturally in two-color gradients, but the third middle color can be something completely different. If red, green, and blue were chosen, for example, then there would first be a gradient from red to green, then from green to blue.

Ad

You might also Like

Recommended

Discuss this Article

Post your comments

exception 'Exception' with message 'error writing captcha: Duplicate entry '2147483647' for key 'PRIMARY'' in /ssd/www/wisegeek/public_html/_core/classes/public/Captcha.php:44
Stack trace:
#0 /ssd/www/wisegeek/public_html/_core/controls/public/ControlDiscussionPostBox.php(324): Captcha->createCaptcha()
#1 /ssd/www/wisegeek/public_html/framework/classes/Control.php(104): ControlDiscussionPostBox->preRender(false)
#2 /ssd/www/wisegeek/public_html/framework/classes/Control.php(149): Control->render()
#3 /ssd/www/wisegeek/public_html/tpl/default-nocustom-lu/pages/public/article/article.htm(526): Control->__toString()
#4 /ssd/www/wisegeek/public_html/framework/classes/Control.php(300): require('/ssd/www/wisege...')
#5 /ssd/www/wisegeek/public_html/framework/classes/Control.php(309): Control->requireTpl('pages/public/ar...', Object(PageArticleCom), true)
#6 /ssd/www/wisegeek/public_html/framework/classes/Control.php(131): Control->renderTpl('pages/public/ar...', Object(PageArticleCom))
#7 /ssd/www/wisegeek/public_html/framework/classes/FormDataControl.php(87): Control->renderTemplate()
#8 /ssd/www/wisegeek/public_html/framework/classes/Control.php(109): FormDataControl->renderTemplate()
#9 /ssd/www/wisegeek/public_html/framework/classes/ScriptPage.php(50): Control->render(false)
#10 /ssd/www/wisegeek/public_html/framework/classes/Control.php(149): ScriptPage->render()
#11 /ssd/www/wisegeek/public_html/framework/classes/Page.php(97): Control->__toString()
#12 /ssd/www/wisegeek/public_html/_core/classes/public/PublicFrontController.php(443): Page->processRequest()
#13 /ssd/www/wisegeek/public_html/_core/classes/public/PublicFrontController.php(7): PublicFrontController->renderPage()
#14 /ssd/www/wisegeek/public_html/index.php(11): PublicFrontController::run()
#15 {main}