Gradients smoothly blend any number of colors and can be positioned along a straight line or form an ellipse across the shape.

Video recorded using: Ignition 7.7


(open in window)

[00:00] As we saw from the previous lesson, every shape we create using the drawing tools has a fill paint or a background color. So here I have a rectangle, and I can go to the "Fill Paint" property under "Appearance". I click on the pencil to modify that background color. And there are quite a few options we have up here at the top. The first is to have no paint at all which will make it transparent. The second is to just have a single solid color, which we did in the previous one where I can make it red, green, or whatever color we want to choose. The third option is to actually do a gradient. And with a gradient I can have multiple colors that I can choose for the gradient. As you can see here I have two stops: I have white and I have black, so I'm going from white to black on my gradient. So really in the white, I can set that to whatever color I want. On the black, I can go and set that to another color and I can specify my gradient. It's possible here to right-click to add multiple stops, so I can go and add a stop, I can then choose whatever color I want in that stop. We can also make reflecting or repeating stops for our gradient. Not only can we make a linear gradient, we can also do a radial gradient where essentially it's going to go from the center, kind of go out. So there's a couple different options you have for gradients. When you choose a gradient, like a linear gradient, on the right-hand side under the toolbar, there is a gradient tool that we can work with to actually modify how that gradient's going to be represented on the component. As you can see right now, it's going from left to right. I can easily take the square and move it around, and I can take the circle and move that around to change the orientation of that gradient. So if you wanted to go from the top left to the bottom right, we can certainly do that. And you can make it larger or smaller depending on how big you want that to be. It also is the same if you make a radial gradient. So if I do a radial gradient, now I have a couple of different options. I can change the circle and how I want that radial gradient to actually look on the component. The last option we have for the fill paint is an actual pattern, so the very last one here we can specify a pattern. So I can choose any pattern that I want. Let's say for example I want to do maybe like a brick pattern here. So I come down, I'll choose this brick pattern, then you can specify a foreground color. and a background color. So background color right now is white. Let's say I want to make that green and then I want the foreground color to be like a dark red or something. As you can see now, it's actually changed. So we can make the fill paint be really anything we want, from no paint at all to a solid color to a linear gradient, a radial gradient, or we can do a pattern here.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.


Share this video