====== Creating color gradients ====== In Starling, gradients are created with the help of the ''Quad''-class. A quad is just a rectangle with a color (but without a texture). And if you look at the interface of the ''Quad'' class, you’ll see that you can not only set one color, but four of them: one per vertex. This is a very simple and efficient way to create color gradients. Have you seen the colorful sky background in PenguFlip((Actually, [[http://itunes.apple.com/us/app/penguflip/id349733798?mt=8|PenguFlip]] was written with [[http://www.sparrow-framework.org|Sparrow]], but it used exactly that principle.))? It was created with 5 huge quads, each with one color gradient. Here’s how one of those quads was created: var bottomColor:uint = 0x1c1191; // blue var topColor:uint = 0xea0b0b; // red var quad:Quad = new Quad(250, 150); quad.setVertexColor(0, topColor); quad.setVertexColor(1, topColor); quad.setVertexColor(2, bottomColor); quad.setVertexColor(3, bottomColor); The vertices 0 and 1 are at the top, while 2 and 3 are at the bottom. Naturally, you can use 4 different colors for the 4 vertices, if you want to. {{ :tutorials:gradient.png |A color gradient}} Remember that ''Image'' is a subclass of ''Quad'' --- which means that you can [[Modifying the color of an Image|tint]] a texture with a gradient, too!