Fun ways to animate CSS gradients

Подписаться 915 тыс.

Просмотров 239 тыс.

50% 1

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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 206

@joeldcanfield_spinhead 4 года назад

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 4 года назад

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👍

@thegrantkennedy 4 года назад

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

@crasymagic 4 года назад

Background clip is reaaaaaally interesting, thanks a lot

@Pspisripoff 4 года назад

Doesnt work for me :0

@nicogorr8440 4 года назад

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

@SoberStones 3 года назад

@@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?

@hellapythonic 2 года назад

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 :)

@odytimesthree 4 года назад

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

@fonncatalina6464 3 года назад

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

@afsanazamannipa7711 4 года назад

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.

@AmandaLucaseu 4 года назад

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

@Fiveleafclover180 3 года назад

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

@Nadia-wu9hk 3 года назад

I love this CSS gradients, thank you!!

@timothyogrady2560 4 года назад

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

@shvideo1 4 года назад

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

@donghuuhieu137 4 года назад

my mind blowed it out, thanks for this amazing ideal

@gbdaeye 4 года назад

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

@scorepro5059 4 года назад

Clipping background image to the text, very cool.

@ShadiMuhammad 4 года назад

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

@ruteshimizu3403 7 месяцев назад

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

@prontocreative2374 3 года назад

That is unbelievably clever ! .... hats off

@rwmedia9847 2 года назад

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

@Mophet 4 года назад

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

@zubairspov 4 года назад

Wow, cool work around on the transitions

@iamtafara 4 года назад

Great tut as usual,,, thanx kev

@MartinLangenberg 4 года назад

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 4 года назад

@d3kra X why do you think that?

@gcecg 3 года назад

Very cool effects! And easy to accomplish.

@termited0 2 года назад

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!

@blonduose 4 года назад

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 4 года назад

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

@rameenana Год назад

Thanks man. This was very helpful.

@LanFeusT23 4 года назад

Great little trick! Love this!

@tobskii1040 3 года назад

That's amazing. Thanks

@Shrinehi1 4 года назад

Very cool! Thanks!

@canapz6370 4 года назад

One of best part to learn css in beginners

@LH-gb2lh Месяц назад

Wow! So easy! Thanks!

@rohil3023 4 года назад

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 4 года назад

Happy I could help 😁

@Isabela-pj3bz 4 года назад

One more fan here. Thanks, great video.

@anatolisimeonov1270 Год назад

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

@burnblue 4 года назад

Clearest you've done

@aliturab5370 2 года назад

dude you really are a fricking genius

@Eternal_Otter 2 года назад

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 :)

@deniskotov 3 года назад

Cool tricks, thx a lot!

@akashrajum3319 4 года назад

Amazing content, thank you.

@BenRogersWPG 2 года назад

This is amazing

@ione7260 3 года назад

NICE one its helping a lot

@KevinPowell 3 года назад

Thanks! 😃

@brainztain 4 года назад

"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 3 года назад

(*Φ皿Φ*)

@travezripley 4 года назад

Kevin!!! You’re a beast!!

@VivekYadav-up7uu Год назад

this tutorial is amazing

@timjobs9072 4 года назад

thank you give me inspirations👍👍👍, good videos

@jaynews9495 2 года назад

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.

@dave6012 3 года назад

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

@henr2000 Год назад

thanks very nice tutorial!

@DumbSkippy 3 года назад

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

@sougataghar1179 4 года назад

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

@JacoblBroughton 4 года назад

Really helpful video thanks man

4 года назад

this is really nice

@ahmedalhallag3338 3 года назад

What a great teacher!

@zakariyaabaouali6904 2 года назад

this amazing of amazing nice work thank you so mush

@erdemm35tr 3 года назад

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

@atouchofa.d.d.5852 3 года назад

Love these!

@maxmuller9871 4 года назад

Thank you so much nice video!

@martinvfarago 4 года назад

Thank you!

@nadicadizdarevic2835 2 года назад

Thanks !

@icekangg 2 года назад

cool, thanks

@iamtharunraj Год назад

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

@AndyInTheUK 2 года назад

That is sooooo coooool!

@prajwalpimpalte7684 2 месяца назад

Amazing!!

@zaye_d 4 года назад

I love you because i love web design stuff's

@georgeliss4015 4 года назад

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

@WORDGASM 4 года назад

Thanks, teacher!

@fernandocremonezcosta1278 3 года назад

Amazing content!

@prontocreative2374 3 года назад

you had me at 'Quacker'

@cptechno 3 года назад

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.

@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!

@SamuelChinzah17 2 года назад

Very Cool 👍

@nickbrown6754 3 года назад

background-clip looks fun and interesting 🤔

@ga7853 4 года назад

That was really creative, Thanks.

@sdKA_garia 4 года назад

amazing 👏🏻👏🏻👏🏻

@bobrobertsNotUrBob 3 года назад

you could also filter hue rotate animate

@DustinHein 3 года назад

inspiring!

@lasersmartrus 2 года назад

Amazing!)

@jackcollazo 4 года назад

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

@KevinPowell 4 года назад

Welcome aboard!

@sudaknot Год назад

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

@DustinHein 3 года назад

what are you using for the title font in this video?

@GiancarloCarccamo 2 года назад

great video

@a.anvarbekov 2 года назад

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

@bhaviksuthar5305 4 месяца назад

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

@estonian44 Год назад

what do you think can i use this bg effect on bakery landing page?

@lucasferrero123 4 года назад

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 3 года назад

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

@gaurishanker10 4 года назад

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 4 года назад

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.

@samuelfischer3764 3 года назад

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

@theTalkingYuccaTree 2 года назад

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?

@JM-jk9vz Год назад

I'm subscribing just because of 9:27.

$@in2fractalout$

@in2fractalout 3 года назад

awesome!!1

@jeffreyhuen 3 года назад

The animated gradients are consuming a lot of CPU resources. I've read somewhere that we can force the GPU to take over these CSS animations by simply including "transform: translateZ(0);" to the element that is being animated. Have you tried this before on the css animated background gradients? Does this work?

@shihab8123 4 года назад

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

@AkashYadav-rj6fn 4 года назад

I have a serious issue pls help... The issue is that the background-clip:text; property is not working.... When I inspected and went on to check the styles other styles were applied (except those who inherited style from parent). But for the background-clip there was a warning symbol in front of it. What's the deal?

@GSKHappyLearning Месяц назад

for text color the gradiant is applied but the animation is not being applied what to do (using chrome also tried for edge not working)

@Aerotk 2 года назад

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

@elderdiascunha1992 2 года назад

Why do you use background-image, instead of background-color, which can be affected by transition and transform properties?

@krishnaramnavaneethakrishn9426 Год назад

It's not working for me and I'm not sure why, but instead of a gradient background I had a image. But if I use -webkit-bacground-clip: it's working. I'm confused. Help please.

@aktharfarvees99 3 года назад

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

@MindGem 4 года назад

Kevin! Can you please do a video of how to color external svgs? I've scrapped the web and there's nothing. The only thing I've manage to do is to change SOME solid shapes but not all because they're super confusing and change on each save like an organic worm. So say you have a simple stick figure, a head, a torso, arms and legs. You want to be able to change the color to each of these elements separately (gradient would be ideal). Are you capable of it?

@KevinPowell 4 года назад

Of an external SVG, I don't believe so