The Most PROFESSIONAL Webflow Gradient Background Animation (2023 Full Tutorial)

hey everybody welcome back to the channel today I want to show you how you can create the cleanest and sickest animated gradient background for your websites in webflow let's do it alright so here's what we're going to be building today just this beautiful moving gradient background I saw this on a site the other day I had to make it for myself and I want to show you guys how I did it because I think it's just so clean I think it adds so much to the bottom of this page and it's just sick I mean look at this it's just moving left to right it's a beautiful rainbow looks kind of like this dumb little buff I'm wearing so let's make this right now it won't take more than a few minutes here we go all right so let's hop right in the playground here and let me show you what I have on the page so far it's just a section and then a little container with a form in it all right that's all I have all right now the text is white so you can't see it right now but we're going to add the background in a second that's all I have first thing we want to do is we want to make this section relative all right so we'll come here we'll make this section relative this way we can set our gradient background div as a z index of minus one and set it behind our contact form all right so we'll set this as relative then we're going to add a div all right and I'm just going to call it um gradient background um wrapper okay and this I'm going to set to Absolute and I'm going to hit full and Z index of minus one all right so that should be behind our form and then inside that wrapper I'm going to add another div and this is going to be actually our gradient background right so this is also going to be absolute full and that should be good like that now let's give this some color now the colors that I'm using I really like I'll give you them right here but we're going to do a gradient just like this we're going to set our angle at 90 degrees okay and then I'm going to add one two three four five six seven eight different stops along the way so we have nine steps all right and I'm going to change each of those to multiples of 11.1 to divide it up evenly so 11.1 22.2 33.3 44.4 and so on all the way down the line all right so now we have an evenly spaced gradient here now here are the colors that I used on mine we'll come in here and I'll show you what they are start off with sky blue here's the hex code right there then I go to my beautiful Crimson hex code right here and down the line this nice little deep pink and this nice little purple or blue and then the last one is this midnight blue right here and then I just go right back down the line backwards all right so we can see our background filling up here this nice little rainbow color obviously you can make this whatever you want okay here blue just double down at the end all right so that's that that's step number one now step number two is we need to make our gradient background wide we need to stretch it because you can see this is very slow and soft transition it's not this like immediate here so what we're going to do is we're just going to grab our gradient background div and with I'm going to make it 900 VW okay so that really stretches it out it makes it like nine times out off the side of the screen okay so that's that and now you can see we have this nice gradient the last thing we want to do is we want to make it move okay we want to make it that really nice soft animation so to do that I'm going to come to interactions I'm going to hit page trigger so whenever we load into this page this animation all will automatically run over and over and over okay so page load I'm going to start an animation create a new animation it's going to be creating background move or something like that way actually I'm going to add one and it's just going to be a move action I'm going to change Target to gradient background I always do selected element you can do class but select the element always works for me all right the duration I'm going to give it a minute okay so 60 seconds and I want to move this thing across the x-axis 800 VW so remember our width is 900 but a Honda that is in the screen already so I want to move it 800. and then back to zero okay so I'm gonna do minus 800 VW okay so now we're at the end of the gradient so it'll take me 60 seconds to get to the end of the gradient or minus 800 VW okay so now we'll add our next movement so same thing we will change our Target to gradient background selected element all right good good to go duration again of 60 seconds and now we just want to move it right back to the origin so 60 second duration and then we'll just go back right to zero VW just like that okay so that's that we'll hit save and then we just want to Loop this okay so after that 120 second animation it just does it again in perpetuity and it doesn't stop all right so that's it we'll hit Loop and then we'll publish and make sure it is looking good and there you have it guys we have a very soft gently moving gradient background inside of webflow I just love the way this looks I think it's super super clean and I think you could use it on your websites to really elevate your site to the next level so if you like this video go down and smash that like button for me it really really helps me out if you want to see more videos like this in the future consider subscribing that'd be awesome if you have any questions or it's not working for you get down in the comments and let me know I'll help you out as fast as I can thank you guys so so much for being here all your support means the world to me and I'll see you all on next week's video peace

Channel: Alex Leischow

Views: 4,578

Keywords:

Id: IdOd-vsjGV8

Length: 6min 50sec (410 seconds)

Published: Thu Feb 02 2023