Fun ways to animate CSS gradients

Keep up to date on my Learn Responsive Web Design course - www.kevinpowell.co/learn-resp...
Gradients are background-images, so we can't set up a transition on that property. It's one of the ones we simply cannot animate with CSS.
Luckily, we can animate background-position, so combining that with background-size, we can do some fun stuff with our gradients, such as a hover effect for buttons, having the body of our page animate, as well as setting up a gradient in some text.
See the code on CodePen: codepen.io/kevinpowell/pen/Eq...
#css #gradients #animation
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! www.kevinpowell.co/newsletter
I've been working on some courses! Find out more: www.kevinpowell.co/courses
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

[@thegrantkennedy]

I’m so glad I found your channel. Your CSS stuff is great.

[@crasymagic]

Background clip is reaaaaaally interesting, thanks a lot

[@Pspisripoff]

Doesnt work for me :0

[@nicogorr8440]

@@Pspisripoff You need to add the "-webkit-" prefix. -webkit-background-clip: text;

[@SoberStones]

@@nicogorr8440 thank you - I was having the same problem!

[@creativityexpeditions4582]

​@@nicogorr8440 Thank you so much. But he didn't use this in the video but his one worked....how?

[@odytimesthree]

Dude, I get super blazed and watch your videos and I learn so much while being entertained. This is some really good stuff, man.

[@afsanazamannipa7711]

You did an amazing video using a simple CSS property. This surely will give a lot of ideas to implement in building an eye-catching website.

[@fonncatalina6464]

Watching your videos is like sitting on couch and having comfort food, soooo satisfying! Thank you so much ! You are my life saver!

[@AmandaLucaseu]

Love the tutorial - so glad I jumped on your new course 👏🏻

[@joeldcanfield_spinhead]

I appreciate that you include some design sensibilities in your videos. This shifting gradient background is a good fit for some bits of my current site rebuild. Much fun.

[@KevinPowell]

Glad that you like the designy stuff I do too, and glad that I could help with something that you can use on your site :D

[@bomajoseph8240]

“Design sensibilities.” Extracted the word from my mouth👍

[@Fiveleafclover180]

Your Scrimba courses are a god-send! Thank you for doing them.

[@brentmakes]

I love your videos! I am a 40-something year-old student who once did web design in the early years of the Browser Wars. I'm taking classes to get back into it now, and watching your videos helps me a ton. It's usually the little things, like reminding us that we should put a cursor: pointer; on a text link styled as a button that make me pause the video and go update my current project :) I also love your CSS Battles and I've started doing them for practice.

[@bumbleguppy]

Ha! yeah, I remember back in that day I wrote a script that would take an element and a couple colors, wrap each letter in a span and with timers animate a gradient. It totally PEGGED the browser. This technique here is so easy and smooth and easy to implement :)

[@aidenefaz9865]

This video is a whole package about gradients. Covered every usecases nicely.

[@gbdaeye]

I love your channel. Thank you for sharing this cool stuff that has lots of potential for new approaches to making websites.

[@donghuuhieu137]

my mind blowed it out, thanks for this amazing ideal

[@timothyogrady2560]

Awesome video Kevin. Found some pretty cool ways to use this for a project I'm working on.

[@termited0]

It occurred to me the day after I watched this video that this gradient trick can be used to create a loading placeholder. Gonna try it! Thanks for great content!

[@Nadia-wu9hk]

I love this CSS gradients, thank you!!

[@ruteshimizu3403]

As someone who has vary little knowledge in CSS, you helped me a lot creating a cool page! Thank you!

[@scorepro5059]

Clipping background image to the text, very cool.

[@Mophet]

Recently I wanted to make a subtle light-reflection run over a button at :hover... :))) that’s it! Thanks!

[@zubairspov]

Wow, cool work around on the transitions

[@rwmedia9847]

I can click wherever on your channel and still learn something. Fun is good (actually great) too. Thank You.

[@iamtafara]

Great tut as usual,,, thanx kev

[@blonduose]

When I started to learn programming I started with JS, then decided on the web dev path. I though HTML and CSS were a bit boring, until I came to your videos....yesterday! It shows how prejudiced one can be towards something one doesn't know very well. Look forward to learning new stuff and styling my projects ! Tank you so much

[@KevinPowell]

So glad that I've shown you that HTML & CSS can be fun! You just made my day :D

[@prontocreative2374]

That is unbelievably clever ! .... hats off

[@MartinLangenberg]

Nice video once again! I have used gradients on buttons combined with a ::before or::after for a smooth transition between states. Did not know about background-clip. That is a cool trick. Keep up the good videos

[@MartinLangenberg]

@d3kra X why do you think that?

[@ShadiMuhammad]

You are always GREAT Kev. 👌 Keep doing these amazing videos. ✌

[@LH-gb2lh]

Wow! So easy! Thanks!

[@gcecg]

Very cool effects! And easy to accomplish.

[@Shrinehi1]

Very cool! Thanks!

[@shvideo1]

It's like three tutorials in one, all very useful and interesting. Great job. Thank you.

[@Eternal_Otter]

I'm not a web developer but the first thing in mind for me was a kind of color wheel that would rotate forever 360 degrees. But a smart idea for just moving the picture left to right :)

[@LanFeusT23]

Great little trick! Love this!

[@tobskii1040]

That's amazing. Thanks

[@rohil3023]

This is really amazing!! thanks a lot, I wanted to change my button in one of my projects whenever a user hovers but I didn't really know how this will help me a ton 😁 cheers

[@KevinPowell]

Happy I could help 😁

[@deniskotov]

Cool tricks, thx a lot!

[@brainztain]

"people are going to hate your website if you have too many fast transitions" *Puts transitions cycling at 1 sec on txt, background, and borders 🤪

[@Kanibulus]

(*Φ皿Φ*)

[@BenRogersWPG]

This is amazing

[@anatolisimeonov1270]

That is a very cool way to do transition for bg-img 🙌🏼(bg-position)

[@rameenana]

Thanks man. This was very helpful.

[@canapz6370]

One of best part to learn css in beginners

[@Isabela-pj3bz]

One more fan here. Thanks, great video.

[@zakariyaabaouali6904]

this amazing of amazing nice work thank you so mush

[@dave6012]

I have used a repeating linear gradient to create a lined paper effect. It was neato-burrito.

[@georgeliss4015]

personally, I'm not a fan of instagram-style gradients, but it gave some other ideas...

[@sougataghar1179]

i was hoping that i could learn to transition gradients but thats a heartbreak .nice video tho :DDD

[@travezripley]

Kevin!!! You’re a beast!!

[@jaynews9495]

maybe you could use the :active pseudo class to get that button animation to make sense on mobile? you could set :hover to have some more innocent effect, like transitioning to slightly bigger button size, or underlining the text or something, and then the animation is reserved for the :focus and :active states.

[@akashrajum3319]

Amazing content, thank you.

[@VivekYadav-up7uu]

this tutorial is amazing

[@burnblue]

Clearest you've done

[@henr2000]

thanks very nice tutorial!

[@ione7260]

NICE one its helping a lot

[@KevinPowell]

Thanks! 😃

[@aliturab5370]

dude you really are a fricking genius

[@martinvfarago]

Thank you!

[@ales_wth_629]

AMAZING, you are awesome

this is really nice

[@maxmuller9871]

Thank you so much nice video!

[@icekangg]

cool, thanks

[@timjobs9072]

thank you give me inspirations👍👍👍, good videos

[@atouchofa.d.d.5852]

Love these!

[@ahmedalhallag3338]

What a great teacher!

[@nadicadizdarevic2835]

Thanks !

[@DumbSkippy]

Hi Kevin, G'Day from West Australia. Gread video. I like your style of presentation. Way to go, Canada! Thank you !

[@prajwalpimpalte7684]

Amazing!!

[@JacoblBroughton]

Really helpful video thanks man

[@AndyInTheUK]

That is sooooo coooool!

[@fernandocremonezcosta1278]

Amazing content!

[@zaye_d]

I love you because i love web design stuff's

[@WORDGASM]

Thanks, teacher!

[@prontocreative2374]

you had me at 'Quacker'

[@lasersmartrus]

Amazing!)

[@sdKA_garia]

amazing 👏🏻👏🏻👏🏻

[@SamuelChinzah17]

Very Cool 👍

[@DustinHein]

inspiring!

[@erdemm35tr]

Hey Kevin, i was playing with that background gradient color and i wanted to ask a question: Do you think is it possible to do that while having an actual image on the background? When we change the background size to 400% for example i lose the feature of background size: cover to photo

[@VasudeoJha]

great fun

[@iamtharunraj]

I'm 3 years late. But, this topic was extremely fun! Thanks a lot Kevin!

[@GiancarloCarccamo]

great video

[@in2fractalout]

awesome!!1

[@JM-jk9vz]

I'm subscribing just because of 9:27.

[@jackcollazo]

ok, I'm impressed ... and subscribed.

[@KevinPowell]

Welcome aboard!

[@nickbrown6754]

background-clip looks fun and interesting 🤔

[@roninsvideos]

Love your videos Kevin. You are the best CSS teacher out there. But I would love to know... Kev, were you drinking before this video? lol. I think you were. lol. Glad you are having fun. Thank you for all the great videos!

[@lucasferrero123]

Great video Kevin. I've found that the background-clip:text does not work on chrome, so I've used the @supports at rule to give browsers that don't support this feature yet another styling.

[@Fiveleafclover180]

Thank you! I was wondering why my text was not going transparent; I was using a chrome browser.

[@bobrobertsNotUrBob]

you could also filter hue rotate animate

[@cptechno]

Can you put gradient background coloring on your favourite(s) data-grid components to give a bit of 3D effect? The point of my quesiton is to find out is the component was structured to allow that.

[@samuelfischer3764]

you could also put a selection on text with ::selection and make that a gradient

[@a.anvarbekov]

Hi Kevin, can you show how to do stripe's linear gradient animated background?

[@Aerotk]

No one is talking about the thumbnail of the video. Pretty funny my man itself being a part of linear gradient

[@grahampcharles]

Animated text over an animated background is awesome!

[@KevinPowell]

😅 - just looking at what's possible here :)

[@ga7853]

That was really creative, Thanks.

[@theTalkingYuccaTree]

Could you set the background image to repeat and just have the animation go in one direction infinitely instead of having it alternate it’s direction?

[@shihab8123]

nice video. How can I use a carousel multiple times in one page.

[@samuelebube6024]

nice

[@bhaviksuthar5305]

Any example for form inputs filled on focus border gradient with smoothly filled that input line with gredient color

[@BikeLifePinas]

hey Kevin, can you do a sample where the background changes based on the time of the day? the idea is to change the background to have sunny colors when it is day and dark blue tones when at night. :)

[@gabrieldai88]

that is some good idea, probably you can do it with javascript. i think im gonna try it.

[@chonky_fox4067]

@@gabrieldai88 have you done it yet?

[@gabrieldai88]

@@chonky_fox4067not yet

[@aktharfarvees99]

this is use full to me thank u so much sir but one didn't work background-clip: text;

[@sudaknot]

Can you make the white background transparent whilst still keeping the transparent txt with the gradient inside?

[@abhishekva449]

From query to here, thanks

[@tahsinkabirkhan]

Watching this exactly after 2 years

[@gaurishanker10]

Nice video! Good one. One question though. Do you use VSCodeVim? Or any other extension for that matter? How do you navigate so fast and write at the same time??

[@KevinPowell]

Sometimes it's through the magic of editing, where I cut out scrolling around, lol. But specially on small files like this, I tend to know roughly where I'm going, so that small preview window thing on the right side makes it easy to click in the general area. I do have a few extensions, but nothing for navigating around.