Background clip is reaaaaaally interesting, thanks a lot

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.

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.

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

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

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

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

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

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

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

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

I'm subscribing just because of 9:27.

you had me at 'Quacker'

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

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.

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!

Animated text over an animated background is awesome!

Clipping background image to the text, very cool.

NICE one its helping a lot

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

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

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

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

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

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

dude you really are a fricking genius

this tutorial is amazing

didn't understood a word but learnt hell lot of things...

Watching this exactly after 2 years

One of best part to learn css in beginners

I love this CSS gradients, thank you!!

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

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

Wow! So easy! Thanks!

background-clip looks fun and interesting 🤔

2021 and it seems like this is now the current trend.

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

That is unbelievably clever ! .... hats off

Wow, cool work around on the transitions

AMAZING, you are awesome

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.

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

you could also filter hue rotate animate

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!

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

Everyone: Twitter gradient Me: Gameboy

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

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

thanks very nice tutorial!

This is amazing

great fun

Cool tricks, thx a lot!

Thanks man. This was very helpful.

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?

Very cool effects! And easy to accomplish.

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

my mind blowed it out, thanks for this amazing ideal

Clearest you've done

Thanks !

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

this amazing of amazing nice work thank you so mush

Yeah, it's great, but I don't know why, on Mac (Safari, Chrome, Firefox), there is a very high CPU usage (over 100%) when using a full animated gradient background, that makes this technique a bit risky to use on a professional website. On my PC desktop, it's working completely fine.

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

cool, thanks

Cool ! but dont forget to prefix ! ;-) -webkit-gradient and -webkit-background-clip:

7:35 he turned in to Jerry (rick and morty) for a little

Amazing!!

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

That is sooooo coooool!

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

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

Great tut as usual,,, thanx kev

That's amazing. Thanks

thank you give me inspirations👍👍👍, good videos

Video starts at 0:50

Very Cool 👍

Very cool! Thanks!

Great little trick! Love this!

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

Thank you!

What a great teacher!

Really helpful video thanks man

this is really nice

One more fan here. Thanks, great video.

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)

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?

Love these!

It is not working on Chrome based browsers. Chrome does not supported background-clip: text

Amazing!)

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.

Thank you so much nice video!

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.

Thanks, teacher!

great video

Amazing content, thank you.

Honest question: why wouldn't this be best practice? I know it wouldn't go with like a lawyer website, but, for example, imagine a 60`s theme store, this would look awesome

I ran into a funny issue, when I try to open my web page in google chrome bg-clip:text; doesn't work, but in firefox this issue doesn't appear. If someone has same issue as I had use -webkit-background-clip: text;

Kevin!!! You’re a beast!!

I love you because i love web design stuff's

That was really creative, Thanks.