---
title: CanvasGradient
framework: webkitjs
role: symbol
role_heading: Class
path: webkitjs/canvasgradient
---

# CanvasGradient

CanvasGradient instances define visual gradients that can be displayed on the HTML canvas element. The CanvasRenderingContext2D properties fillStyle and strokeStyle can be set to a CanvasGradient object. You obtain a CanvasGradient instance by calling one of the gradient creation methods of the CanvasRenderingContext2D class—createLinearGradient() or createRadialGradient().

## Declaration

```data
interface CanvasGradient
```

## Overview

Overview note: For usage examples and conceptual guidance, see Safari HTML5 Canvas Guide.

## Topics

### Adding Color Stops

- [addColorStop](webkitjs/canvasgradient/1631166-addcolorstop.md)