Phaser API Documentation

Only webGL fillGradientStyle(topLeft, topRight, bottomLeft, bottomRight, [alphaTopLeft], [alphaTopRight], [alphaBottomLeft], [alphaBottomRight])


Sets a gradient fill style. This is a WebGL only feature.

The gradient color values represent the 4 corners of an untransformed rectangle. The gradient is used to color all filled shapes and paths drawn after calling this method. If you wish to turn a gradient off, call fillStyle and provide a new single fill color.

When filling a triangle only the first 3 color values provided are used for the 3 points of a triangle.

This feature is best used only on rectangles and triangles. All other shapes will give strange results.

Note that for objects such as arcs or ellipses, or anything which is made out of triangles, each triangle used will be filled with a gradient on its own. There is no ability to gradient fill a shape or path as a single entity at this time.


name type arguments Default description
topLeft number

The top left fill color.

topRight number

The top right fill color.

bottomLeft number

The bottom left fill color.

bottomRight number

The bottom right fill color. Not used when filling triangles.

alphaTopLeft number <optional> 1

The top left alpha value. If you give only this value, it's used for all corners.

alphaTopRight number <optional> 1

The top right alpha value.

alphaBottomLeft number <optional> 1

The bottom left alpha value.

alphaBottomRight number <optional> 1

The bottom right alpha value.


This Game Object.

Since: 3.12.0