Fun ways to animate CSS gradients

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.

#css #gradients #animation

---

---

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

[crasymagic]

Background clip is interesting, thanks a lot

[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.

[thegrantkennedy]

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

[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.

[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.

[afsanazamannipa]

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.

[fonncatalina]

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 👏🏻

[Fiveleafclover]

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

[aidenefaz]

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

[donghuuhieu]

my mind blowed it out, thanks for this amazing ideal

[Nadia-wuhk]

I love this CSS gradients, thank you!!

[gbdaeye]

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

[timothyogrady]

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

[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

[ruteshimizu]

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

[termited]

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!

[scorepro]

Clipping background image to the text, very cool.

[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 🤪

[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