New to Kendo UI for jQueryStart a free 30-day trial

kendo.drawing.LinearGradient : kendo.drawing.Gradient

Represents a linear color gradient.

Example - creating a linear gradient

<div id="surface" />
<script>
  var draw = kendo.drawing;
  var geom = kendo.geometry;

  var gradient = new draw.LinearGradient({
    start: [0, 0], // Left, top
    end: [1, 1],   // Bottom, right
    stops: [{
      offset: 0,
      color: "#f00",
      opacity: 0
    }, {
      offset: 1,
      color: "#f00",
      opacity: 0.8
    }]
  });

  var rect = new geom.Rect([
    // Origin X, Y
    0, 0
  ], [
    // Width, height
    100, 50
  ]);

  var path = draw.Path.fromRect(rect, {
    stroke: null,
    fill: gradient
  });

  var surface = draw.Surface.create($("#surface"));
  surface.draw(path);
</script>

Fields

Constructor Parameters

Configuration

Methods