Qt Reference Documentation

QML Gradient Element

The Gradient item defines a gradient fill. More...

  • List of all members, including inherited members
  • Properties

    • stops : list<GradientStop>

    Detailed Description

    A gradient is defined by two or more colors, which will be blended seemlessly. The colors are specified at their position in the range 0.0 - 1.0 via the GradientStop item. For example, the following code paints a rectangle with a gradient starting with red, blending to yellow at 1/3 of the size of the rectangle, and ending with Green:

     Rectangle {
         width: 100; height: 100
         gradient: Gradient {
             GradientStop { position: 0.0; color: "red" }
             GradientStop { position: 0.33; color: "yellow" }
             GradientStop { position: 1.0; color: "green" }

    Note that this item is not a visual representation of a gradient. To display a gradient use a visual item (like rectangle) which supports having a gradient set on it for display.

    See also GradientStop.

    Property Documentation

    read-onlystops : list<GradientStop>

    This property holds the gradient stops describing the gradient.


    Thank you for giving your feedback.

    Make sure it is related to this specific page. For more general bugs and requests, please use the Qt Bug Tracker.

    [0]; s.parentNode.insertBefore(ga, s); })();