Linear and radial gradients

- [Man] Playing with gradience in XD can be very powerful. So here I have a rectangle, and lets say I wanna change it from a solid color to a gradient. So I click there on the proper inspector to see the color picker. Then I use this dropdown here to change from solid to in your gradient. When I do that you will look for, in this case I had white to show me darker gray. If I had black, you would be show me kind of a lighter version of that color.

SO XD kinds of help you there to get something that looks nice. If I wanna change the value, I can select the color stop, in this case this white and then I can choose a different color. Let's say it's a pink. I can select this second one from a darker pink. And as you can see, I can play with that here and I can see the update there in real time here on my canvas. If I want to add another color stop, I can click here and I can move it around, click and drag.

I can add another color stop here. Lets say it's yellow. But if I don't like that, I can click and drag outside. So get rid of that color stock. And I can also use the canvas here to adjust the gradient into add color stops. The nice thing about doing that on a canvas. Lets change this color for you to see. Lets say its dark and it gets back to that light one.

If I have my selection here on canvas and I hit tab, I can go through each color's step and just hit tab here to go through my color stops. Very, very useful for gradients. Again, I can use that here. Perfect! Now lets play with radial gradience. It's the same process. Click there and you still have a solid one. We're gonna choose radial gradient. Click there. And in this case I can then play with this to grow or shrink the size.

This is too kind of distort and this is very useful for the radial gradience there. And if on a rotate, I just use that and rotate right here. And the process is similar if you wanna add color stops here or something that's darker. And as you can see, now I have two different objects with two different kinds of gradients.

And I can play with that using the color picker or add it directly on canvas. I'll delete these guys now. And I can see that this mobile design has a lot of gradience. So lets find one that has a nice gradient. So this guy has a gradient as a fill, and as you can see, it goes from the green one to the yellow one. I can add a color stop if I want. I can change where my color is here and have different results.

So this is a nice shape to have as a gradient and it creates this very nice look and feel that can really make your design look a lot better. And I have more gradients here. So I don't know if you can see up here. I have one that goes from black and I'll open that. It goes from black to a green. But that green is transparent, which is very cool because you'll kind of blend with what's behind here. So very powerful. I can also play with that here.

But it gives me the ability to create a very nice look, and feel, design in here by just playing with the transparency on my gradient as well. So this is how you play with gradience in XD, radial, and lenial gradience.