Gradients can be successfully used to Add color depth and visual interest to a Design with them you can create cool Stuff like this Or this or this Or this or this But in the past couple of years Designers kind of steered away from Gradients because a flat design became So popular well I think now in 2023 Gradients are making a comeback and I'm Really happy to see that because they Represent a great way of adding Dimension to a design right so in this Course You'll learn everything you need to know About creating gradients on the web but Hey if we're just meeting my name is Adi I'm a web designer and developer and We're going to split this course in Three parts first we'll seek to Understand gradients and we're gonna Take a look at their Anatomy we'll Explore some best practices and we'll Also see some real world examples then We'll create some gradients in CSS and Here we'll focus on the most common Types which are linear and a radial and Finally we'll explore some more advanced Gradient techniques by looking at a Gradient overlays gradient meshes and Gradient text However before we get into all that I Want to quickly tell you about envato
Elements here you can find that tons of Useful resources like fonts icons UI Kits WordPress themes music stock photos And much more for careers like me this Is an awesome resource because all the Assets have simple commercial licensing And you're not bound to any contract Therefore you can cancel whenever you Want so if you're interested check out The link in the video description Alright so let's kick things off by Learning about the basics of gradients Before we get started you should know That the video description contains Links to all the resources that I've Used in this course as well as links to The course files so if you want to Follow along you can download those from There also don't forget to subscribe to The envato test plus YouTube channel for More free content just like this All right so let's start with the basics A color gradient also known as a color Ramp or color transition is basically a Gradual progression of color we can also Think of it as a visual effect that Creates a smooth transition between two Or more colors blending them together Seamlessly to understand what I'm on About here's a simple gradient that goes From a very light green to a darker blue As you can see the transition between The two colors is seamless Now when discussing gradients we need to
Learn about their anatomy and here there Are three things we need to talk about That is type Color stops and Direction first type There are several gradient types we can Use linear radial conic or angular and Diamond The linear gradient creates A transition between two or more colors In a straight line this can be Horizontal vertical or at any angle in Between the radial gradient creates a Transition between two or more colors in A circular or elliptical shape this has A central point from which the gradient Spreads outwards the conic gradient is Very similar to the radial because it Creates a transition of colors in a Circular or elliptical shape the Difference is that while a radial Gradient transitions from the center Point to the outside Iconic gradient rotates around the Center point finally a diamond gradient Creates a transition of colors in a Diamond shape with the colors fading out Towards the edges of the diamond out of The four gradient types I just mentioned And the two you'll probably be working With the most are linear and Radial now Let's talk about color stops each Gradient has at least two colors the Start and the end but we can have any Number of colors in between and those
Are called color stops and depending on The number of stops we can go from Gradients that look like this Two gradients that look like this So there really isn't a right or wrong Number of color stops it really depends On the purpose of that gradient Now finally when discussing the anatomy Of a gradient we need to talk about the Angle and this basically refers to the Direction of the gradients for example This linear gradient can look totally Different if I change its direction we Can have a vertical gradient where the Colors are aligned at a 90 degree angle From the x-axis and we can have a Horizontal gradient where the colors are Aligned with the x-axis or we can have An angled gradient where the colors are Aligned at a certain angle from the X-axis in this case it's 30 degrees Now here are a few things you need to Keep in mind when working with gradients And the first one is this It's really simple to add color stops to A gradient but that doesn't mean that You have to do it Uh usually you'll stick with two colors But if you want to be brave and Experiment with multiple colors do it in A sensible manner otherwise you'll end Up with something like this which Is not exactly visually pleasing When choosing colors for a gradient you
Need to create a smooth transition and Your best bet For achieving that is by going for Analogous colors these are sitting next To each other on the color wheel and a Great tool for getting them is Adobe Color by selecting the analogous color Harmony we get four great options For a second color we can also use tints Or shades of the main color these are Basically colors created by adding white Or black there are several tools Available and I've linked two of them in The video description Gradients can also contain colors with Different levels of opacity and this Will allow that gradient to also blend With the background this is a technique That works nicely for creating a Gradient overlay for example as you can See from this demo the gradient colors Blend well with each other but also with The image background Finally always think about accessibility Just because we're not working with a Solid color But with a gradient instead it doesn't Mean we have to disregard accessibility Right color contrast you need to always Think about the color contrast ratio and Stick to the wcag standards if this is Not familiar to you wcag stands for web Content accessibility guidelines And they're basically a set of
Recommendations for making web content More accessible for people with Disabilities now there are several ways Of checking color contrast but one of The best tools I've found is the one you See here it's made by Fabrizio Bianchi And you can find a link in the video Description All right so now that we've learned the Anatomy of a gradient and also some best Practices for using them let's see how Other people have implemented them in Real websites and we start with this Envato elements in the home page we have These filter cards that have gradients Applied to them but they also have Gradients applied to the border and we Can clearly see that when we hover on Them I think this is uh just a great use of Gradients just add that little extra Dimension to a design the second example Is stripe uh this features some really Nice animated blurred gradients in the Background they are also displayed Here in the inner pages right we can see Those animated gradients Yet again But also something that I really like is They apply those gradients to the icons As well so if we're gonna increase The zoom level here To an obscene amount you can say that These icons have a very
Very slight very subtle gradient applied To them and it's not just uh One icon it's basically all of them Right you can see the the green here Kind of a gradient if I open up my Color Picker you can see that we're going from A lighter version of the color uh to a Darker version and that that's that's Like really really cool uh the purple uh Seems to be solid color overall but the Green And actually some of these other colors Yeah they're using a very subtle Gradient so yeah stripe if you want to See an example of gradients done right Uh go to the stripe website really cool Another example is the Zeus Jones Website uh apart from Some gradients being used as an Animation here in the background We can also see them being used let me Actually zoom in here as underline for Links Pretty cool I really like that approach And of course they are using them here In some of these images as well and in a Few other places around the website but Yeah using them as borders for these Links and they're also animated that's Really cool Another example is a monograph Communications This features a gradient as the Background for the entire page and
What's really nice is that when you Change the page you get a different Gradient So this is the one for the about page Services page it gets a different Version And of course the contact page Gets a different version Cool Very simple but I like it and the last Example that I want to show you is uh Antara Studio this also uses gradients But in a much more subdued way so we Just have some radial gradients going on Here in the background in the first page And uh that's about it really They didn't go overboard like other Places instead they just use them in uh In that place in the uh the header of The page basically of course we can see Them in other pages but they're only Present here in the in the header slash Hero area of of the website okay now Let's see some key takeaways a color Gradient also known as a color ramp or Color transition is a gradual Progression of color we can also think Of it as a smooth transition between two Or more colors there are several Gradient types we can use linear radial Conic and Diamond the linear gradient Creates a transition between two or more Colors in a straight line This can be horizontal vertical or at
Any angle in between the radial gradient Creates a transition between two or more Colors in a circular or elliptical shape This has a central point from which the Gradient spreads outwards the conic Gradient is very similar to the radial Because it creates a transition of Colors in a circular or elliptical shape The difference is that a conic gradient Rotates around the center point a Diamond gradient creates a transition of Colors in a diamond shape with the Colors fading out towards the edges of The diamond each gradient has at least Two colors the start in the end it can Also have any number of colors in Between and those are called color stops Gradients can also have a direction Which can be horizontal vertical or at An angle when creating gradients Consider the following best practices Use the right colors preferably Analogous ones use opacity to blend with The background and don't forget about Color contrast so with this uh lengthy Part out of the way let's move on and Learn how to create gradients with CSS As I was saying previously the two most Common gradient types you'll be using Are linear and Radial so these are the Ones we'll be focusing on let's start With the linear I prepared a very simple demo for you uh We have this hero area I guess we can
Call it and we have a button and let's Say I want to add a gradient to this Button how do we do that well in our Code we can see the button has a class Of width gradient right so let's target That class and we're going to say the Following a gradient first of all is Like a background image so we're going To use background image you can also use The shorthand background property If you want and I'm going to say linear Gradient and here I can say red comma Blue And that's going to create a gradient That by default goes from top to bottom From red to blue these are the colors That I just set here of course I can Have As many colors as I want Now in my case I'm using some custom Properties and I have the GC gradient Colors set up right here so gc1 gc2 and Gc3 So in my case I'm going to say VAR gc1 And VAR gc2 So now my gradient let's make this a Little bit bigger My gradient goes from this light blue to A slightly darker blue and by default we Go as I said from top to bottom but I Can easily change the direction By adding a parameter here For example two Left and then a comma and then my list
Of colors So now the gradient will go From right to left I go from the light Blue on the right To the dark blue on the left or I can Say I wanted to go To the right Or I can say go to the bottom right And that's going to create it at an Angle it goes from top left to bottom Right Or I can say go bottom left or top left Or top right so I have a lot of control Over the direction of the gradient Now if I don't want to use keywords like This I can specify A fixed angle for example I can say go 64 degrees so now the gradient is going To go 64 degrees from this bottom left Corner I can tell it to go 90 degrees And that's going to go Basically from left to right I can tell It to go 0 degrees that's going to go top to Bottom 180 degrees That goes top to bottom and so on and so Forth I can do whatever number of Degrees I want now as I said I can have More than two colors so let's say We're going to set two rights and let's Add a third color here I'm going to add my Gc3
So now I have a gradient that goes to The right with A start and and a color stop in between Right so I have three colors going on But here's the cool part I can decide Where these colors start because now They start Or they're positioned automatically Right so the first color is here the Second is right in the middle and the Third is right at the end but I can say For example that I want the first color To start at 10 pixels I want the second Color To start at 20 percent And I want the third color to start at 70 percent So now I get a totally different result Right the first color starts at 10 Pixels right here the second color Starts uh starts at twenty percent and This one starts at 70 percent and uh Another cool thing we can do with Gradients is we can actually bypass The transition all together so if I want Like a clear cut between the two colors Here's how I do that let's say I'm gonna Send this to the bottom Uh left And I'm going to work with two colors Gc1 and gc2 and both of these Are going to start at 50 percent by Doing this we're essentially Uh cutting off the transition and now
The colors don't blend smooth they just Have a very clear line separating them So that's how you create linear Gradients right you use the background Image property or the background Property that also works and then you Specify Linear gradient and you pass in your Parameters the list of colors is Separated by a comma you can also Specify a direction either by using Keywords or Degrees And of course you can use more than one Color And you can also decide where the Gradient or the color stop starts and Finally if you want to remove the smooth Transition between gradients you can set Each of them At the same starting location now let's Move on to radial gradients For this second demo let's say we have This page here and it's a very simple Page maybe something that's uh uh you Know under construction and we have some Simple content on a dark background and It looks pretty good But we can actually use gradients to add Just a little bit more Dimension to this And for that we're going to use a radial Gradients so here's how we do it the Body in my case has a class of w Gradient so let's go ahead and Target
That in CSS And like before I'm going to use a Background image but this time I'm going To use a radial gradient and if I do the Typical red and a blue example here You'll see that we go from the first Color red and it radiates outwards Towards the blue And that's how the radial gradients work Now just like before I have some custom properties gc1 and Gc2 and these are basically shades of The primary purple purple color that I'm Using So instead of using red and blue of Course we're going to use gc1 and gc2 So save that And now just by doing that This looks a lot better in my opinion Right we have this kind of vignette Effect going on And we go from this lighter purple Towards the darker purple and by doing This we're actually drawing the user's Attention towards this area because it's A bit lighter in color see how much of a Difference we can make with just one Gradient if we were to remove this right So this is what we had before And this is what we have after much much Better Now just like linear gradients we can do A lot of things to tweak how a radial Gradient looks like for example we can
Set where a specific color starts I want this to start at 70 so I want a Bit more of the second one than the First right and this kind of limits the Area of spread for the lighter color Something else we can do is we can Change the location of the center point Right or the starter Point by default It's right in the middle But We can use at and thus and then specify The location so I want this to be in the Middle fifty percent Uh on the x-axis but on the y-axis let's Say I want it to be around 25 so it's Going to be the center is going to be Around here somewhere instead of here And also let's Change this to 80 percent Now by default This gradient kind of takes on the shape Of its uh of its parents so if the Aspect ratio or the let's say the the Parent is kind of a rectangle then the Gradient is going to be an ellipse but If I wanted to be a circle then I can Specify that I can say I want this To be a circle and I can say exactly how Big the circle should be I can say uh 150 pixels All right so that just creates a circle That's 150 pixels but at the coordinates That I want in my case 50 x 25 y
Now obviously this is a bit too small And I actually want it to be an ellipse So let's do that ellipse the coordinates Are the same But this time instead of setting 150 Pixels I can use keywords to determine Its Dimension and I can use Something like closest side and this Basically sets the dimension in relation To the distance between the center point And the closest side in this case it's The closest side of this is this one if I set this to farthest oops Uh furthest Side We're going to have a different Dimension because now the dimension is Determined by the distance between the Center point and the farthest side which In this case is probably this one here Or this one here or I can do something Else entirely I can say ellipse and I Can Specify a percentage for its size I can Say something like 72 percent in width And 96 in height and also the starting Point should be at 50 and 25 percent And that's going to create something Like this and those are a few ways you Can customize a radial gradient so Looking at these Yet again We have the real radial gradient is Declared just like like the linear yeah
It's declared as a background and then I Can pass in Uh as many colors as I want in this Example I'm only using two colors I can Determine the amount of color for each Of them I can determine the location of The starting point I can also specify if I want the Gradient to be a circle or an ellipse And I can change its Dimensions either By using keywords like this Or percentages When it comes to browser support you'll Be happy to hear that gradients are Supported in all major browsers nowadays So there is no reason you should not use Them right away one thing that is not Fully supported is animating gradients In all browsers right but that's a Discussion for another time the Gradients themselves work great So now let's take a look at a few key Takeaways uh linear gradients transition From one color to another in a straight Line they can be applied horizontally Vertically diagonally or at any angle Using the linear gradient function in CSS radial gradients transition from one Color to another in a circular or Elliptical shape they can be applied Using the radial gradient function in CSS gradients can be applied to a Variety of elements usually by using Background properties such as background
Or background image browser support is Great with all modern browsers Supporting both linear and Radial Gradients and that's how you can create A linear and Radial gradients in CSS now What I showed you so far is pretty basic Right they're pretty basic uses for Gradients but we can do so much more With them So coming up I'm going to show you uh Three more advanced use cases for Gradients in CSS All right so we'll keep things nice and Simple and work on three demos that will Hopefully give you some ideas about CSS Gradient use cases let's start with the First one So here we are uh let's try and create Some gradient overlays like we see in This um reference image right so uh we Need to create this with CSS of course We have a description and uh like this Gradient that goes from top to bottom or Bottom to top Vertically Basically and we go from a very light to No color here on the top to a very deep Purple here at the bottom and we'll do It starting with this image which by the Way you can find Linked In the video Description so let's start with this we Basically have an image here but it's Not going to be enough so what we can do Instead we can use a figure and let's
Give it a class of overlay and we'll Paste in the image and we'll also use a Fig caption for the text and the text Says spring fashion 23. So now with the overlay class we'll do The following we'll set uh some Dimensions let's say 20 20 Ram with 30 Ram height And we'll set a position relative Because we want to position the Fig Caption absolutely right so let's see What we got so far we can see that text Here that's good Uh let's make the image So I'm going to say overlay IMG Let's give it a width of a hundred Percent and a height of 100 so it Completely fills up the uh the figure Element And let's make it Object fit cover so whenever we're Resizing this element uh it's gonna the Image will resize automatically as well And let's also make it around so we'll Say border radius 8 pixels that should Do a trick great now let's move this fig Caption Inside the image basically So we'll say overlay thick caption Position absolute let's position bottom To REM left to Ram let's increase the Font size 32 pixels That's good let's make the weight like
Super heavy like that let's make the Text uppercase like that let's change Its color to white and let's set a Max Width let's say three quarters of the Way so 75 percent like so and let's also Change its line height 1.2 m Should do a trick something like that Great now let's see about the actual Overlay the color the gradient we're Going to use a before pseudo element It's a very simple to do so we're going To say overlay before or after it Doesn't really matter content It's going to be blank Let's position this absolutely also And let's make it as Wider than as tall as the parent element For that we're gonna say inset zero this Basically sets top right uh bottom and Left to zero which makes it uh the full Width full height of its parent element Uh let's also give it a border radius so It matches or whatever the parent has And then Background color or sorry background Image Let's use a linear gradient 180 degrees so top to bottom And we go from rgba 87 32 114 And 0 right this starts at zero percent So right at the top and we go to Again rgba same value 87 32 114 100 Percent
Right so we go from This bit with zero percent opacity From the top And we go to this value at the bottom of Course we can use Simple RGB here since We don't have an alpha Channel but if we Want to use an alpha Channel let's say Maybe I want to go for Um I don't know sixty percent opacity Or sorry 0.6 Right that goes to uh this color but With a sixty percent opacity in my case I want Oops just a full color so we can just do RGB instead of rgba how easy is that Right and of course this being a Gradient you can say to right Or you can change its direction in any Way that you want The second example deals with gradient Meshes so we have uh the same page that We used previously worry in a previous Demo so if you remember the radial Gradients example that I showed you Where we use the radial gradient to add Just a little bit more Dimension to this Page well now we're going to use a Gradient meshes to do basically the same Thing and a gradient mesh is made by Layering different gradients in our case Radial gradients and you can go ahead And do it by hand but I recommend you Use a tool like measure which is created By CSS hero so a gradient mesh basically
Looks like this and if I hover on it you Can see that we have different Points these represent the starting Points for radial gradients you can Clearly see that when I move them around And these are layers they're displayed One on top of the other And if I press the space bar on this Tool I can actually randomize These gradients so once I find one that I like in terms of uh you know the Colors being used and their placement I'm looking something with uh maybe Something like this with with some Purple because My page here also has some purple so What I can do is I can actually get this This background color and I can change It right here Right and I can see a preview of what That looks like and it's not quite there Yet Let's uh play around some more maybe This one Not quite What about this one so this uh this Could work I guess you can also you know Just play around with the location of of Uh some of these points you know maybe Something like this And something like this and of course You can change the individual colors for Each of these gradients right you can Click on one and you can change the
Value here but let's say you're happy With this version right so what you can Do is you can click export Right that's going to give you a preview And the option to copy the CSS code to The clipboard so once you do that you Can go back to your code editor in this Case I'm going to apply These the style to the body with the Class of w gradient and I'm just going To paste that in save and now if I go Back We can see that I have that bit applied To my page and of course this being made From CSS I can you know decide to change These to my liking I can you know maybe Make the colors a bit darker Something like this Right I think that's going to change the Way the gradient looks like and if I Don't like this I can go back to the Tool and I can hit spacebar to generate Another gradient in my case after Playing around with this tool a little Bit I ended up with something like this Right just a combination of purple and Some blue and some a little bit of green In there And I You know I left some of these sections The darker color the background color so I have the logo in here and maybe I you Know display something else in here but I think this creates a nice Symmetry and
Of course depending on the background And how everything looks like you can go Ahead and maybe change Some of the elements that you have So for example this badge Uh I have this set the background color The primary tint 60 and the color of the primary shade 30 But you might want to Swap these around again depending on how It looks like and how it blends with uh With the rest of your background But yeah that's an super easy way of Creating these super nice Gradient backgrounds use a tool instead Of coding by hand there are a few Gradient mesh tools out there but I Found this one measure to be my favorite You can use whatever you want And finally our third demo is about Working with gradient text so for our Demo we have like the top portion of a Websites where in the hero area we have This very large heading or very large Piece of text and I want to highlight This digital word right I wanted to make To add a gradient To it so how do we do that Well first of all we have to single out This word we need a way to Target it With CSS So if we look at the HTML code we just Have an H1 so what I can do is I can Wrap this in a span element
Right so I'm going to have H1 create Your and digital is going to be Displayed in a span element obviously This has no effect Immediately because we didn't apply any Kind of stylings that span So what we can do is we can say H1 span And let's add a nice background to it If you are struggling for inspiration I Can recommend UI gradients this is a Great website for getting a few ideas For gradients you can cycle through These one by one they'll each give you a Name and the colors used or you can Click this to show all the gradients you Can even sort them Or filter them by uh by color in my case For this application I'm looking for Something called cinnamon it's this one Right here And once you're happy with this you can Actually copy CSS code so you click this Button You click it Yeah you go back to your code you paste That in Right so now you have A background applied or a gradient Applied to your text But this is not really what we want now We singled out the text but I want the Gradient to be applied to the text Itself not the text background Well to make that happen
Uh we need to do the following we need To set the background Clip property Which basically determines the Background painting area Need to set that to text And of course in webkit browsers we need To use a prefix Like so So now the background is not visible why Is that Well it's there But it's only Applied to the shape of the text But we cannot see it because the text is Colored so If we say color Transparent it's going to render the Color of the text transparent which Means we can see behind it Therefore revealing Our gradient quite simple to do it works In all the browsers right as you can see Here we are using some prefixes this is Not necessary for the gradient But it is necessary for the background Clip which makes this whole thing Possible So either use an auto prefixer to add These prefixes for you or do it manually But setting background clip The text super important and then hide The original color of the text by Setting it to transparent
And then you can have whatever Background gradient you want you can Change the direction Right you can add multiple colors you Can even do a mesh gradient if that's What you want but when it comes to text I like to keep it super simple so a Simple uh two color gradient works Wonders okay then so a few key takeaways Uh gradients can be successfully used as Image overlays just make sure you add Some opacity so you can see what's Behind the gradient you can add as many Gradients as you want you simply list Them one by one and separate them with a Comma gradients can also be applied to Text just make sure you set the Background clip properly to text and set The text color to transparent all right And that's about it for this course let Us know if you enjoyed it and if you Have any questions please leave a Comment down below as always don't Forget to check out the envato test plus YouTube channel for more content like This And also subscribe and learn about web Design web development and a lot more It's all free so make sure to also hit That like button if you like this video I'm Audi thank you very much for Watching and I'll be seeing you next Time take care Foreign
[Music] [Music]
