Building Blurry, Animated Background Shapes with Tailwind CSS

hey what's up everyone in this video we're going to build some pretty satisfying blobby blurry blendy animated background using a mix of css filters mixed blend modes and animations we'll do all of this with tailwind css let's get right into it [Music] all right so yesterday i was browsing the web looking for some design inspiration and i ended up finding this website called calls or quals.com so this is a really clean and simple design and one thing i particularly liked about it is these multi-color blurry shapes in the background and if you pay attention they're actually moving slightly this is a really subtle touch but i thought it gave this design a lot of character and brought it to life so in this video we're going to recreate this sort of background effect using tailwind css utility classes all right so here's our starting point we have this pretend bit of ui here and i've made the background pink so you can see these shapes better but i will now change that to bg gray 50 and i'll also hide all of this ui for now by giving it an opacity of zero with opacity zero so now we can focus on building the background and then we will bring back these elements on top of it okay so this div here is the container where we want to have our background shapes placed and we're going to absolutely position these little shapes so this container here will take a class of relative all right let's create a first shape so it's going to be a div and we'll give it some classes the first one will be absolute let's go with top 0 but we'll offset it to the left a little so minus left 4. we're going to give it a width and height of 72 a background of purple 300 and rounded full and here's our first shape so now i will duplicate this and for this one we're going to change the color to bg yellow 300 and instead of minus left 4 we're going to go minus right 4. and here it is all right let's create one more of these shapes so i'll duplicate this and this one will be pink 300 and for the positioning we're going to go with minus bottom 4 and left 20 and here it is and actually let's go with minus bottom 8 so it's a little bit more offset there you go so if we inspect the original website with the dev tools and let's go and delete the image for now you can see that where the two shapes overlap there is a different color which is some sort of a blend between the two and to do this we're going to use mix blend modes i'll go and select my three shapes one two three and for each i will give it the class of mix blend and we will go with multiply and now you can see that our colors are blending together and composing new colors where it overlaps okay next another obvious thing that we're missing is these blurry edges right so for this we're going to use css filters and the blur filter to apply any filters in tailwind you need to first use the filter class which operates as a toggle to switch on the filters and then we're going to use blur and here we're going to go with a really blurry blur so blur 2xl and it might be just a little too much so let's go with just blur xl right so now it's starting to look pretty interesting let's bring back our original ui by removing the opacity on it and see how it looks and yeah that's pretty cool i think the background shapes are slightly too intense though so for all three we'll also add an opacity of 50 with opacity 50. and you know what let's actually go with 70 opacity just to make sure that you can see it properly on the video so now let's add the clutch feature of this design and bring some motion to these shapes so like here we're going to have a slow and infinitely repeating animation on each of the shapes and i'll head over in the tailwind config file and we're going to extend two things first we're going to extend keyframes and here we're going to define keyframes for our blobby animation so i'll call this one blob and so we'll have a first keyframe for the zero percent step and we're going to apply a transform which is going to be scale of one so it's the default scale for the starting point next keyframe will be at 33 percent once again transform and this time we'll overshoot a little bit so scale 1.1 let's duplicate this and at 66 the transform scale will be 0.9 and one more copy for the 100 step and there we'll go back to scale one so that's only one part of our animation but let's start with this and now we need to also extend the animation object which we can also call blob and here we're going to use the blob keyframe so this here is referencing this blob keyframe animation and our animation will go over seven seconds and it will loop over and over with infinite okay let's go back in our html and for our first shape the purple one here we're going to add this animation so we should now have an animate blob animation and yep here it is so let's see what happens so now if you can't see it because it's quite subtle let's go here and make it loop faster so maybe over four seconds and we'll also transform to 1.2 and 0.8 to make it a little bit more drastic all right and now you can see it properly so you can see it's moving outside and then back in back in the original design you can see that the shape doesn't just scale up and down it also slightly move up and down right and left so let's add a little bit of translate to our keyframes so we'll compose this with scale for the first step at zero percent we will start with translate zero pixel and zero pixel at thirty three percent let's also add a translate and here we move by thirty pixels and minus 50 pixels at 66 percent we will go with minus 20 pixels and let's go back up to 20 pixels and to close the loop here we're going to go back to zero with translate 0 pixel 0 pixel and now you should be able to see that our purple blob is kind of moving up to the right at the start and then back down so that's a little bit too quick and too drastic so i'll go back to what i initially had before updating the demo to seven seconds and we were only scaling to 1.1 and down to 0.9 and that's going to give us a more subtle and smooth movement which is what we're after here we don't want to drag attention too much we want to bring a little bit of delight but not make it obnoxious and eventually distracting all right very cool so let's go and apply this blob animation to our two other shapes so i'll select this one and the one below and also add animate blob and so now all our shapes are moving exactly at the same time in the same direction which looks a little bit silly let me just come here and make our ui transparent once again and as you can see we're completely losing this blend of colors because everything moves as a block okay here we could create different keyframe animations with different translate property values but i think a simple trick that should work is to delay the animation between the different blobs so we're going to keep the same animation and we're going to apply a different delay at the start so the loops are out of sync and the shapes look like they're moving individually what we're going to do is create some simple animation delay utilities in our css file and that's going to allow us to delay any animation that we want i will come in our taylor.css file i'll open at layer utilities block and we want to apply animation delay so let's go with animation delay and go 2000 for 2000 milliseconds or two seconds and here we're going to target the animation delay property and apply two second delay and let's do another one for maybe four seconds so animation delay four thousand and four seconds okay so now we're going to apply the delay 2000 to the yellow blob and the delay 4000 utility to the pink blob so let's scroll back up here and here for yellow we have animate blob and we're going to keep this animation but we're also going to apply a delay with animation delay 2000 and i'll come down in the pink one and this one will have animation delay four thousand whoops four thousand okay here we go so now we have staggered our animation every two seconds let me select the three blur xl utilities and remove them and so now it's a little bit easier to see that the purple starts two seconds later the yellow starts and then two seconds after that the pink starts and it's a much more interesting movement between the shapes okay let's bring back a nice blur effect we're going to now bring back our ui by removing this opacity and see the final result i'll make that a little bit bigger and that's pretty cool so like i mentioned you can probably play around with the easing timing function so it's less abrupt in certain parts of the animation but at least now you know exactly how to recreate this pretty cool blurry background motion effect using tailwind css and that about wraps it up for this video thank you so much for watching and as always i will see you in the next one bye for now

Channel: Tailwind Labs

Views: 28,065

Keywords:

Id: Tmkr2kKUEgU

Length: 9min 47sec (587 seconds)

Published: Mon Jun 07 2021