Create Smooth, Eye-Catching Color Gradients! Mesh, Aurora, and Blended Gradients for UI Design

color gradients are nothing new they've been around on the web in graphic design and in ui design for a long time as a product designer gradients can add life and emotion to our designs and branding trends like mesh gradients a la stripe aurora gradients like apple blended gradients like asana so what exactly are the different gradient styles and how do you make beautiful ones for your ui designs let's talk about that hi everyone i'm elizabeth from designerup helping you level up your product design skills first what is a gradient a gradient by definition is a slow gradual transition a color gradient is a color ramp or color progression on a spectrum of two or more colors or stops that blend or morph into each other you can use gradients on layers objects shapes as fills or outlines you can also use them on top of images or on text they can be static or animated different types of gradients the type of gradient will depend on the central starting point of the first stop and how the degrees blend and rotate around that point this will result in a particular pattern and is one aspect that will affect the finished look there are a few common types of gradients linear where all the colors align in a straight line radial where the color starts in the middle and spreads outward in the shape of a circle reflected the color is mirrored on both sides of the starting point angular the color starts at a single point and spreads outward in clockwise degrees around that point how to make the colors blend so if you want to get that really smooth buttery look to your gradients there are a few things to watch out for you might notice a dull or gray area between your colors or stops to avoid this add in a third color so the best way to do that is to pick a color that is in between the first and second stop so we want to add a stop right in the middle now the color of that stop should also be somewhere in the spectrum that crosses the two colors that you've chosen and one easy way to do that is to just take your color picker and move it over to right in the middle of the area of your linear gradient and right in that dot if i click on it it will show me that we're somewhere in this pink area so i move my color picker anywhere in here if i want to be light and bright or a little richer just like that and that's my third stop that takes me from blue through to a second stop over to my final stop of orange so you can see the difference in that murky gray area versus this nice smooth transition and of course you can pick other colors as well we can change this to a little bit more purple you can keep it closer to that color that was the original first stop and just mess around with that middle point get it away from that gray zone so that you don't have that murky area if your colors still aren't blending make sure to use the sliders on your canvas or your artboard to adjust and manipulate the gradient gradient color palettes one of my favorite parts about creating color gradients is experimenting with different color combinations so taking concepts from traditional color theory we can take a monochrome color palette which is two different shades or tones of the same color and we can apply it to our gradient so we would just click on our shape here select a gradient fill the first stop would be one of our monotone colors and the second stop at the end would be the other and again because these are monotone there's not really that weird gray area in the middle so you should be pretty safe with two stops you can also use a split complementary color palette so here this is two opposite sides of the color wheel you can use an analogous color palette this is great for colors that are right next to each other on the wheel so orange and yellow and then applying the same principles of color theory using triadic colors etc to learn more about color systems color models and color theory check out my other video link in the card above gradient styles there are also subtle differences in the swirling patterns and effects of different color gradients i've categorized them here into five main styles fade the most common default style where one single color fades into another or into the background color to achieve this just add a fill and set it to gradient and choose the linear mode mesh these are when we see circles or blobs blurred together in different colors a true mesh gradient is created by applying color to specific points on a grid you can then manipulate the contours of that grid around a shape or distort it on a plane and feather it into each other but if you're not using a program like adobe illustrator and you're using something like figma or sketch there's still a way that we can create these mesh looking gradients what you'll want to do is start with a shape i start with a simple oval and then cover your canvas with two or three of those i'm just going to take three of these and duplicate them i'm gonna make them pretty large so that they just kind of fill out the whole canvas and then i'm gonna pick three colors and a little later in the video i'll talk about how you can choose these colors that are very harmonious and that work well together using color theory so now i'm going to click on each one of these and i'm going to add a really big gaussian blur to that and now you can resize these and move them around and you have a nice mesh gradient swirly making random vector shapes and swirling them together as they overlap and blur into each other so to do this we just take the same circular shapes that we had before and we click on them to edit the points of the path and then we can manipulate these shapes into curvy swirly patterns and this gives us that liquidy fluid look to our gradients rainbow using a bunch of different colors and blending them together so for rainbow gradients again it's the same technique we're taking the blobs or shapes that we've created before and we're just adding more of them layering them on adding lots of color and then we can manipulate those move those around and get a nice colorful effect aurora using monotone or many colors and blending them together in a way that makes them lighter and glowy at the ends so for aurora gradients we're going to go ahead and create a shape layer over our art border canvas and then i'm going to go over to fill and select the gradient i'm going to use a linear gradient and just put it on a diagonal and i'm going to change the color stops here to something a little brighter and bolder maybe two pastels a bit of a pink and a purple blend and then i'm gonna grab my vector tool and i'm just gonna start creating a random path and i'm gonna curve all of these points so that it's nice and smooth and i'm just going to curve it around snake it around and take it off the canvas so that you don't see the harsh ends so i'm going to close that path and then i'm going to add a fill to it so going over to fill i'm going to click on that and i'm going to set a gradient fill and i'm going to use the same two colors that are in my background i'm going to invert them a little bit move them around and then i'm going to lower the opacity on the one at the end so that the color really just kind of blends into it then i'm going to select that path go to blur and add a gaussian blur on that not going to take it up too far maybe about halfway and now you can see this soft aurora looking light it looks like the glow from the northern lights and now i'm just going to add a few more of those quickly and move them around rotate them position them create some different shapes thinner ones thicker ones to really give us that aurora borealis look and stay subscribed because i'll be doing another video on my recommendations for best online gradient color generators different ways to apply gradients you can apply gradients to just about any design element such as fills on shapes like buttons as outlines on text or on top of images gradient overlays adding gradients over our images is called a gradient overlay and there are a few tricks to doing that to make your images look really good so first we're going to grab an image then we're going to take a rectangular shape and put it on top of that layer and then add a gradient fill this is just a simple linear fill and i'm putting it on a diagonal now you can achieve different looks and effects from the gradient by changing the blend mode so this is an example of multiply it kind of darkens the image and saturates the color there's color burn you can lighten the image with the gradient overlay you can screen so that you can see the image through it more clearly and then you can just experiment with the other blending modes that are in your design apps so what i like to do is just leave it on overlay and i lower the opacity a bit so that it's just tinting the image and not too overpowering then i'm going to duplicate that rectangle on top of all of our layers and i'm going to set the blending mode back to normal and on that one i'm going to increase the opacity of the gradient fill that we've added to that rectangle so what you end up with in your layers panel is your initial image then on top of that you have a rectangle that has a gradient fill with the blending mode set to overlay and the opacity lowered just a little bit on that and then another rectangle on top of that with the blending mode set to normal and a gradient fill on top of that with the opacity lowered to the level that works for that image and then you can continue to tweak the colors blend it set your stops until you get something that looks really rich and custom and that's just about everything you need to know to create beautiful trendy color gradients for your ui designs thank you all for watching and i'll be back again with more soon you

Channel: DesignerUp

Views: 23,647

Keywords: color gradient, how to create color gradient, gradient background, mesh gradient, aurora gradient, mesh color illustrator, mesh color, mesh gradient fi, gradient mesh, freeform gradient, gradient ui design, gradient ui trend, ui gradient, how to make multicolor gradients, rainbow color gradient, gradient trends 2021, gradient tutorial, radial gradient, smooth gradient, color palette, user interface, user interface design, product design, abstract gradient

Id: s3c-wGbV6K4

Length: 11min 21sec (681 seconds)

Published: Wed Apr 21 2021