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,
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.
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
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
#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
To put gradient on a text: h1 { background-image: linear-gradient(to right, IndianRed, DeepSkyBlue); color: transparent; background-clip: text; display: inline-block; }
Used this gradient feature on the Instagram icon my web, it's white and black but when you hover over it it changes into a beautiful gradient colour like on instas icon Thanks to you 👍👍
Good tutorial, but not well explained when it comes to the values between parenthesis and their extension across the background. But I'm glad that I found out with a bit of practicing. Thank you a lot for posting this, though, you're always my first source.
Ive seen a lot of css drawings where only one div is used. Radial gradients are also used a lot. Can you do a video explaining this process? Thanks a lot Joe.
thankyou kevin , it will be very helpful if you make a video with gradients over background images and then some text over it . i really need to learn this please comment if you have time
background: radial-gradient(220px 80px at top center, green, yellow); I do not understand this radial gradient example. it is from a project I was working on. I will be grateful if you can include this in your examples.
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
can you please help giving a tool-tip over the linear gradient with 2 colors, red and blue like if we hover on red show a tooltip and similar way for blue as well. how can we achieve this? pl help
How can I create a linear or radial gradient as a background and also change the opacity without affecting the text that should go in-front of it? I can use Opacity: value; within the css class, but that affects the text, and I just want to dim the gradient. Would I have to to use rgba with the a value set to something like .1 for every rgba value? Thanks. Also, nice quick tutorial.
Alright so, anyone help me out here if you can. I'm doing gradient backgrounds with a size of 600% , because I'm using keyframes to have the gradient background transition to a new gradient once a button is pressed. How do I prevent the background gradient from shrinking together with the window when it is resized? background-size: cover; is no option for me, since then the keyframes wouldn't work.
Hi Kevin! I'm shopping around for a nice looking spreadsheet. I would like the spreadsheet to look good because if reflects on my software application. I don't see REACT spreadsheets components use gradients coloring for row background. Gradients can give the rows an illusion of 3D, like each row how a half of round pipe. That's the sort of effect I'm looking for. Is that possible?
![Yeat & Quavo - 5BRAZY [Official Music Video]](http://i.ytimg.com/vi/4XxnTAwyxus/mqdefault.jpg)
OMG ... finally i know how to use gradient in css !!! thank you man ...
Glad I could help!
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,
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.
Thank you teacher. I am a Brazilian programmer and I follow you to learn more. very good your tips.
These 5 minutes videos are a lifesaver.
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
Loving the way that format is one your screen mate! super easy to follow cheers.
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
got a portfolio?
i hate those which get randomly interested in a subject, stupid geeks
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.
Hurt me too, lol. I probably should've redone it with some softer colors. Next time!
I was actually really confused about the linear-gradient's values/parameters, but it's crystal clear now. Thanks a lot :)
No problem!
Yes me too i saw it tedious
great video - right in spot. I like the idea of 5-minute video with nothing but pure content.
#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
The king of CSS on RUclips. Here is the 👑 crown from my side.
i really like how you explain things and your videos are easy to understands
Thank you for the kind words, glad that you like my style :D
I love how fast this was.
Finally, a RUclipsr who knows why youtube was made
Thank you, Kevin
To put gradient on a text:
h1 {
background-image: linear-gradient(to right, IndianRed, DeepSkyBlue);
color: transparent;
background-clip: text;
display: inline-block;
}
super-fast. essentials only. awesome job, sir! thank you!
9 dislikes are probably flat earthers which mistaken CSS for ISS...
Can't be a YT video without a few dislikes :)
Used this gradient feature on the Instagram icon my web, it's white and black but when you hover over it it changes into a beautiful gradient colour like on instas icon
Thanks to you 👍👍
I just love u man. Finally I found something like this on YT.
Thanks for the kind words, and glad you're enjoying my content :)
SUCH A LIFESAVER!!! thank you so much sir and gbu!
Cool narrative style, full of info. Great vid dude. 👌 ♥
This fiveminute thing you're doing is really fun and useful.
Expecting more....😀
Glad that you're enjoying them!
@@KevinPowell Well I used some of them in my competitions.
😁 So I love these short tricks that help me save a lot of time.
Awesome video, thanks Kevin
I love this series!
Made it seem so easy
Thanks a lot
a very detailed and simple explained video sir keep going!!!!!
Interesting stuff... I am following you and learning from all tutorials
Glad that you're enjoying my content Sanjay!
This is brilliant. Thank you so much!
Amazing 5min toturial
This is so helpful, thank you Kevin!!
Good tutorial, but not well explained when it comes to the values between parenthesis and their extension across the background. But I'm glad that I found out with a bit of practicing. Thank you a lot for posting this, though, you're always my first source.
Thank you sir 😊
Awesome!!! thanks a lot Kevin!!
nice job Kevin 👏
It worked, thank you.
Nice. Thanks. Coming from the post then learned 😅
Now the solid lines I did not know!
One of those little hidden gems that I love discovering in CSS
Thank you Kevin! Awesome!
DUDE! THANK YOU!!!
Super easy, thanks!
Awesome channel. I'm starting to really like front-end development
So glad to hear that, and glad that you're enjoying my channel!
Thank you teacher🌸🌸
CSS seems like a really good alternative to Graphic Design with Adobe Suite.
Thank you so much
Thank you
this was very helpful
Great Tutorial
Ive seen a lot of css drawings where only one div is used. Radial gradients are also used a lot. Can you do a video explaining this process? Thanks a lot Joe.
Thank you so much sir
Thanks Sir!
Thank you so much for doing this great work you mean so much to me
Thank you, nice video!
Kev, css gradient borders when? ❤️
So Thanks
Thank you!
Aww.... thank you man this really made my day🔥🤩🙌
Thank you sir
thankyou kevin ,
it will be very helpful if you make a video with gradients over background images and then some text over it . i really need to learn this please comment if you have time
Maybe this is what you are looking for? ruclips.net/video/-c94pr41jaI/видео.html
Thanks.
Well done
What if you want to a custom multiple radial gradients that touch into each other like 5 different hex codes?
Cool as always.. many thanks
Thanks
thankyou
background: radial-gradient(220px 80px at top center, green, yellow); I do not understand this radial gradient example. it is from a project I was working on. I will be grateful if you can include this in your examples.
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
omg same did you find out why?
thanks, great.
Nice Tut
can you please help giving a tool-tip over the linear gradient with 2 colors, red and blue like if we hover on red show a tooltip and similar way for blue as well. how can we achieve this? pl help
What a lesson! OMG!
Nice one
really helpful thx YYDS for code
Hey, thanks Nice vidéo !
good work
i got hypnotized
amazing video...thank you sir 😄
How can I create a linear or radial gradient as a background and also change the opacity without affecting the text that should go in-front of it? I can use Opacity: value; within the css class, but that affects the text, and I just want to dim the gradient. Would I have to to use rgba with the a value set to something like .1 for every rgba value? Thanks. Also, nice quick tutorial.
I like it! This is easy. :D
Perfect
very helpful video ; thanks ; dude;
It's really really really interesting!!!
You are a god
WoW....Thanks...!!
Hey, I am from future when you are called 'the king of CSS'
can we use it as a background website?
Very interesting!!!! Thanks a lot!! :)
Thank you
Amazing!!
which one better for html,css
4 years later and its still friday lol
Coming across this one year later, also on a Friday lol
5 years later it's still Friday 😂
Cool video..
Like to learn more about gradients..!!
Got a few more videos on them planned for the coming weeks :)
great tutorials sir. But still, I need an in-depth one.
Awesome!!!
Smart way to use it. :)
Alright so, anyone help me out here if you can. I'm doing gradient backgrounds with a size of 600% , because I'm using keyframes to have the gradient background transition to a new gradient once a button is pressed. How do I prevent the background gradient from shrinking together with the window when it is resized? background-size: cover; is no option for me, since then the keyframes wouldn't work.
شكرا Thanks
Hi Kevin! I'm shopping around for a nice looking spreadsheet. I would like the spreadsheet to look good because if reflects on my software application. I don't see REACT spreadsheets components use gradients coloring for row background. Gradients can give the rows an illusion of 3D, like each row how a half of round pipe. That's the sort of effect I'm looking for.
Is that possible?
Which browser are you using to run the code? Because the linear gradient is not working in crome, edge, firfox browser in my pc.
linear-gradients are supported in pretty much all browsers these days, check your syntax, there might be a problem causing them not to render.