Fun ways to animate CSS gradients

Published: 07 August 2019
on channel: Kevin Powell

245,741

8.7k

Keep up to date on my Learn Responsive Web Design course - https://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: https://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! https://www.kevinpowell.co/newsletter

I've been working on some courses! Find out more: https://www.kevinpowell.co/courses

---

My Code Editor: VS Code - https://code.visualstudio.com/

How my browser refreshes when I save:    • How to automatically refresh your bro...

---

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

Instagram:   / kevinpowell.co
Twitter:   / kevinjpowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

On this page of the site you can watch the video online Fun ways to animate CSS gradients with a duration of hours minute second in good quality, which was uploaded by the user Kevin Powell 07 August 2019, share the link with friends and acquaintances, this video has already been watched 245,741 times on youtube and it was liked by 8.7 thousand viewers. Enjoy your viewing!

989