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
#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
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
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
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 👍👍
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.
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.
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.
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
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.
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
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
The king of CSS on UA-cam. Here is the 👑 crown from my side.
Finally, a UA-camr who knows why youtube was made
Loving the way that format is one your screen mate! super easy to follow cheers.
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!
#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
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 :)
great video - right in spot. I like the idea of 5-minute video with nothing but pure content.
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
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
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
I love this series!
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 :)
Cool narrative style, full of info. Great vid dude. 👌 ♥
Thank you, Kevin
I love how fast this was.
SUCH A LIFESAVER!!! thank you so much sir and gbu!
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?
a very detailed and simple explained video sir keep going!!!!!
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 👍👍
This is so helpful, thank you Kevin!!
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
nice job Kevin 👏
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.
Nice. Thanks. Coming from the post then learned 😅
Awesome video, thanks Kevin
Made it seem so easy
Thanks a lot
Thank you sir 😊
It worked, thank you.
DUDE! THANK YOU!!!
Thank you so much for doing this great work you mean so much to me
Thank you teacher🌸🌸
Awesome!!! thanks a lot Kevin!!
Thank you Kevin! Awesome!
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.
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.
this was very helpful
Super easy, thanks!
Aww.... thank you man this really made my day🔥🤩🙌
Great Tutorial
Thank you so much
Kev, css gradient borders when? ❤️
Thank you so much sir
Awesome channel. I'm starting to really like front-end development
So glad to hear that, and glad that you're enjoying my channel!
Thanks Sir!
Cool as always.. many thanks
Thank you very much
Now the solid lines I did not know!
One of those little hidden gems that I love discovering in CSS
Hey, I am from future when you are called 'the king of CSS'
Thank you, nice video!
Thank you
Now I can hypnotize the customers that come to my website 😂😂😂😂
CSS seems like a really good alternative to Graphic Design with Adobe Suite.
Well done
Thank you sir
What a lesson! OMG!
It's really really really interesting!!!
Thank you!
amazing video...thank you sir 😄
I like it! This is easy. :D
very helpful video ; thanks ; dude;
really helpful thx YYDS for code
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.
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? ua-cam.com/video/-c94pr41jaI/v-deo.html
Nice Tut
Nice one
Very interesting!!!! Thanks a lot!! :)
good work
thanks, great.
So Thanks
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.
which editor did you use?
i mean online editor
which one better for html,css
WoW....Thanks...!!
What if you want to a custom multiple radial gradients that touch into each other like 5 different hex codes?
Thanks.
Hey, thanks Nice vidéo !
i got hypnotized
thank you
Amazing!!
Thank you
Cool video..
Like to learn more about gradients..!!
Got a few more videos on them planned for the coming weeks :)
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.
Thanks
thankyou
Awesome!!!
Is a vertical linear gradient this way ||||| or - ??
Perfect
It is very interesing CSS :)
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.
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
You are a god