Glowing Background Gradient Effects with Tailwind CSS

[Music] hey what's up everyone in this video we're going to recreate this glowing background gradient effect that you can see here with the intensified effect as we hover over the button let's get right into it [Music] alright so when looking at an effect like this you could be tempted to think that since the glow is following the edge of the button we would need to use a drop shadow to achieve this as i'll show you in this video there are other ways to achieve this and actually thinking about shadows here is not necessarily the right thing to do shadow utilities in tailwind are not just about creating separation they're a carefully crafted hierarchy of elevation levels the first one looks like it's right against the background the second one has a little bit of elevation the next one a bit more etc and so using this hierarchy properly lets you bring more or less attention to different elements throughout your design looking back at this button there's no real elevation concept whatsoever it's more about giving the background a glowing effect to give attention to this button in a different way okay so i'll show you how you can achieve that effect with tailwind utilities and we're not going to use box shadows but instead we're going to use a blur filter here we're going to create our button and we're going to start with a few classes we're going to have some padding horizontal of seven for the padding vertical i'll go with four we'll have a background of black we'll want some rounded corners maybe rounded lg and we're going to reduce the line height of the text within the button with leading none finally because we have multiple bits of text within this button we're going to add a flex container and align the items vertically with items center inside this button we'll have two span elements the first one will have a color of text gray 100 labs release and we're going to go with 20 21.09 because we're in september now and we'll have a second span i'll duplicate it the text here will be indigo 400 and it will say c what's new and we want to write arrow with at rar okay let's save and have a look at what we've got so far and here you'd be tempted to use a spacing utility with space x 5 but in our case we want this little separator here so instead we're going to use a divide utility divide x and the color is going to be divide gray 600 and you can use divide and spacing utilities together so we need to apply the spacing inside so here we're going to go padding right six for the first one and the second one will have padding left of six all right let's add a logo here and we're not going to use this logo but we're gonna go grab a heroic on icon so because we're talking about labs releases i'm going to search for a beaker here which is nice i'll copy that svg and we're going to wrap our first element here in another span which is going to be a flex container so flex and items center and this time we're going to use a spacing utility with space x 5. and so let's move the closing one here and i will come and paste my svg inside of that flex container it already has the height and width that i want but we need to change the color to let's go text pink 600 nice and bright and i will also rotate it a little bit with minus rotate six all right so that's our button done so now we can tackle the interesting part so we're gonna try and recreate this nice glowing effect now using like i mentioned a blur filter okay so the trick here is we want to create another shape that is exactly the same dimensions as the button and place it behind and then we can apply this blur we have a button here and we're going to wrap it in a div with the position of relative so let me move that down to the closing of the button and that relative container here allows me now to create an absolutely positioned element with absolute and we're going to go with inset 0 and also a background of pink 600 just like our logo and let's also add the rounded corners with rounded lg so now this shape sits exactly on top of our button now because we want a button to actually be on top we need to set it to something else than position static so we're going to go with relative here and it should bring the button back on top nice all right let's come back up here and make the background actually black and here's the cool thing now we're going to come here and apply a blur utility to our elements that's behind the button so blur and look at this that's pretty cool so this is only one type of blur you can go with blur extra large for much bigger effect or blur small and you can also play with different parameters for example i can change the inset 0 to be minus inset 1 so the blur is going to be a bit more outside of the button let's look at insert 3 to exaggerate the effect and i think here 0.5 is actually a nice sweet spot and one more thing you can play with is the opacity of this element so opacity and if i go with 50 you can see it's a bit weaker and here we're going to go with 75. now let's change this pink background to be a gradient so i'll go bg gradient 2 right and we're going to go from pink 600 and we want to go to purple 600 all right so that's starting to look really cool let's compare this button with the actual button we were looking at so you can see a nice addition here is on hover not only the text here changes color but also the background becomes a little bit more intense when you come in and then it goes away when you go out because we want to hover on the entire button and change things on the text and the elements behind we need to use group hover here so we're going to take our relative element here and add a group class let me close the svg so we see clear so one of the elements is the text here group hover we want the text to become like the other text which is text gray 100 and we'll also add a transition and a duration of 200 milliseconds the other element that we want to change on hover is this one and here on group hover once again we want to change the opacity to be 100. once again we want a transition and a duration of 200 milliseconds let's look at it all right so on this button when i hover in on the button the glow and the text come in at about 200 milliseconds but when i hover out the glow takes a little bit longer to move out so let's change this to 1000 milliseconds and this is the time we want when we leave the element so you can see now it's fading out much slower but we still want for the background to come in 200 milliseconds so here i can go group hover duration 200. so now when we hover over the group it's going to take 200 milliseconds and when we leave it's going to use the 1000. all right so that's in my opinion a really good way to achieve this background glow effect remember we're not trying to create a level of elevation here and it gives you the freedom to use any color gradients etc as you please and i want to leave you with a little bonus final touch that brings a little bit more delight if we look at the current button you can see that the background gradient has this also subtle tilting animation from left to right really slowly so just for fun to wrap it up here let's create a custom animation that does the same in the tailwind config file we're going to extend the keyframes object and we also extend the animation object and we're going to create a tilt animation class which is going to use our tilt keyframes so check this out now we have a new animate tilt class the effect is exaggerated to 5 degrees but you can see the background glow is tilting from left to right really slowly but let's come back in our keyframes and we'll go back from one degree to minus one degree [Music] and with that done that about wraps it up for this video as always thank you so much for watching and i will see you in the next one bye for now

Channel: Tailwind Labs

Views: 22,707

Keywords:

Id: 5W6kEP65AH4

Length: 9min 13sec (553 seconds)

Published: Mon Sep 06 2021