Gradient

Updated: 10/04/2017 by Computer Hope

Gradient may refer to any of the following:

1. A gradient fill is a graphical effect that produces a three-dimensional color look by blending one color into another. Multiple colors can be used, where one color gradually fades and changes to the other color, such as the horizontal gradient blue to white shown below.

Gradient fill example

Gradient images are used in many places, including the background of applications and buttons.

How to Gradient fill in Adobe Photoshop

  1. In Photoshop, click the Gradient Tool, as shown in the picture below.
  2. In the top menu, select the gradient style you want to use. By default, the tool uses a left-to-right gradient.
  3. In the picture, drag the mouse in the direction you want the gradient. If you want the gradient to appear only in a section of your picture, select the area with the marquee tool first.

Adobe Photoshop gradient tool

2. With CSS (cascading style sheets), gradient is a style that can be applied to text. For example, the following CSS code creates a class called "gradient" with a vertical gradient of blue to orange.

<style>
.gradient {
font-size: 72px;
background: -webkit-linear-gradient(#2572cb, #ff9244);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>

For example, the following paragraph tag has the gradient class, which gives all text contained in it a gradient appearance.

<p class="gradient">Computer Hope</p>

Below is the result.

Computer Hope

3. With a word processor, like Microsoft Word, gradient is a text effect that can be applied to document text.

Fill, Halftone, Software terms, Typography terms, Video terms