Create and modify gradients

A gradient is a graduated blend between two or more colors or tints of the same color or different colors. You can use gradients to create color blends, pie-charts, add volume to vector objects, and add a light and shadow effect to your designs.

XD supports linear, radial, and angular gradients.

XD shades from the starting point to the ending point in a straight line.

XD shades from the starting point to the ending point in a circular pattern.

XD applies a fill with color gradients that sweep around a shape from the center of a circle. 

To access the Gradient color picker in XD, select an object, and click Fill in the Property Inspector. You can create linear, radial, and angular gradients in XD.

Choose Linear Gradient, Radial Gradient or Angular Gradient from the drop-down list at the top of the color picker.

You can use the Gradient color picker to choose the colors and set the opacity for gradients.

The Gradient color picker has a gradient editor that shows a quick preview of all the colors used in a gradient. Checkerboards indicate the transparent parts.

The gradient editor also displays the color stops in a gradient. Small circles indicate the color stops. The colors change and mix depending on how close the color stops are to each other. The color stops are also displayed in the on-canvas gradient editor that appears on the object to which the gradient is applied. 

Two color stops are available by default. You can add more color stops by clicking the gradient editors. You can drag the color stops along the gradient editors to change the positions of the color stops and vary the spread of each color. To delete or remove a color stop, drag it away from the gradient editor in the Gradient color picker. Or, click the color stop on the on-canvas gradient editor and press Delete.

The on-canvas gradient editor helps you change the direction of the gradient.

The corner handle helps you change the origination point and angle of a radial gradient.

The slider on the right of the Gradient color picker allows you to control the opacity of the color stop.

Apply a linear, radial, or angular gradient fill

Apply Angular Gradient to objects

You can create color wheels, pie-charts, or progress indicators using angular gradients. Angular Gradient applies a fill with color gradients that sweep around a shape from the center of a circle.

Follow these steps to apply Angular Gradient to a circle and create a color wheel.

Once you complete creating a color wheel, you can copy and reuse the Angular Gradient effects in other shapes like Rectangle or Triangle.

^Examples

Find below, some of the samples that are created using Angular Gradient. 

^Tutorial

Angular gradients, which are different from linear and radial gradients, can be really useful for the designs like progress spinners and color wheels. Watch this tutorial from Dani Beaumont — Principal Product Manager, Adobe XD — to learn how to use Angular Gradient.

Watching time: 4 minutes 7 seconds. 

Import objects with gradient fill

When you import a gradient as an SVG, the color picker displays the Gradient option by default. When you copy and paste an object in XD, the gradient fill is also copied. You can modify the color and the color stops of the gradient that you import.