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 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, with the following CSS code in the header of an HTML (hypertext markup language) page, any class with "gradient" would have blue to orange gradient text.

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

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, Software terms, Typography terms, Video terms