CSS Gradients and repeating gradients

A quick look at CSS gradients. While the basics of them are really simple, a lot of people don't know about repeating gradients, which are really easy to use and which let you do some pretty cool stuff.

#fiveminutefriday

---



---



---


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.

[ahmed.mfawzy]

OMG ... finally i know how to use gradient in css !!! thank you man ...

[olawaseem]

Thank you so so much, I spent nearly an hour to understand how it works I was changing numbers until everything become clear for me, BTW your videos are giving the motivation :).
Regards,

[albenideslyma]

Thank you teacher. I am a Brazilian programmer and I follow you to learn more. very good your tips. <3

[arjunlubana]

These 5 minutes videos are a lifesaver.

[rotimishaibu]

Thanks Mr Powell. Finally I know how to use linear gradient. It seemed like a mountain to me before.
Although, this is not my first video from your end, but I just have to admit your narrative style seem to me the best. In some others', I feel magic is done and then miracle in the sky.
Please don't stop sir.

[Protoscribe]

Holy crap that red and blue broke me haha. Keep it up Kevin, I like dropping by and seeing you do simple fun things like this.

[kidbrave_]

Thank you master of CSS!!!. You made me a believer in thinking the impossible with using CSS gradients and it not being possible with making your background being set at an angle and having a line cutting off the different colors, but leave it to no surprise it is definitely possible thanks to this amazing content, so thank you so much for making this video Kevin your the BEST!!. :D

[ahmedpak]

The king of CSS on YouTube. Here is the 👑 crown from my side.

[niclinford]

Loving the way that format is one your screen mate! super easy to follow cheers.

[AmirulIslam-ggfn]

I was actually really confused about the linear-gradient's values/parameters, but it's crystal clear now. Thanks a lot :)

[BobCat]

super-fast. essentials only. awesome job, sir! thank you!
9 dislikes are probably flat earthers which mistaken CSS for ISS...

[kenshinnanashi]

great video - right in spot. I like the idea of 5-minute video with nothing but pure content.

[Pedritox]

#fiveminutefriday thank you!!! You are a genius... lomg enough to cover simple subjects and a day to relax and see something new... wait for more next friday

[codingworld]

Finally, a YouTuber who knows why youtube was made

[MrToRoKoN]

I just love u man. Finally I found something like this on YT.

[aprilrosequartz]

Thank you ! I'm a third year college student — and my major subject for this 2nd semester is Web designing, we haven't tackled this yet but I got so interested with the subject that I went on ahead and learn by myself 😂

edit: I took graphics design

[shubhamsonawane]

i really like how you explain things and your videos are easy to understands

[trophieboi]

This fiveminute thing you're doing is really fun and useful.
Expecting more....😀

[whoeverwhoever]

Hi, mine looks weird. does this only work in a box like div? i want to make my whole webpage background in gradient. so i got

body {background: linear-gradient (45deg, pink, teal);}

I thought it would fill up the whole webpage, but it in lines, like gradient lines pattern. it's like the whole page is fill with gradient boxes. what did i miss?

THanks

[cyberfunk]

SUCH A LIFESAVER!!! thank you so much sir and gbu!