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,
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
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.
#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
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.
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 👍👍
To put gradient on a text: h1 { background-image: linear-gradient(to right, IndianRed, DeepSkyBlue); color: transparent; background-clip: text; display: inline-block; }
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.
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.
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?
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.
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.
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,
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
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.
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!
Loving the way that format is one your screen mate! super easy to follow cheers.
#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
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
The king of CSS on RUclips. Here is the 👑 crown from my side.
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 :)
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 :)
Finally, a RUclipsr who knows why youtube was made
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.
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
Cool narrative style, full of info. Great vid dude. 👌 ♥
I love this series!
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
Awesome video, thanks Kevin
I love how fast this was.
nice job Kevin 👏
Thank you, Kevin
Interesting stuff... I am following you and learning from all tutorials
Glad that you're enjoying my content Sanjay!
a very detailed and simple explained video sir keep going!!!!!
This is so helpful, thank you Kevin!!
This is brilliant. Thank you so much!
Made it seem so easy
Thanks a lot
SUCH A LIFESAVER!!! thank you so much sir and gbu!
Awesome!!! thanks a lot Kevin!!
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?
Nice. Thanks. Coming from the post then learned 😅
Amazing 5min toturial
Thank you Kevin! Awesome!
Thank you teacher🌸🌸
Thank you 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!
Super easy, thanks!
DUDE! THANK YOU!!!
Now the solid lines I did not know!
One of those little hidden gems that I love discovering in CSS
Aww.... thank you man this really made my day🔥🤩🙌
It worked, thank you.
Thank you so much for doing this great work you mean so much to me
this was very helpful
Cool as always.. many thanks
Great Tutorial
Thank you, nice video!
I like it! This is easy. :D
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.
What a lesson! OMG!
What if you want to a custom multiple radial gradients that touch into each other like 5 different hex codes?
It's really really really interesting!!!
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 👍👍
Cool video..
Like to learn more about gradients..!!
Got a few more videos on them planned for the coming weeks :)
Thanks Sir!
To put gradient on a text:
h1 {
background-image: linear-gradient(to right, IndianRed, DeepSkyBlue);
color: transparent;
background-clip: text;
display: inline-block;
}
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.
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 😂
Well done
amazing video...thank you sir 😄
Thank you so much sir
Thank you!
can we use it as a background website?
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.
Hey, I am from future when you are called 'the king of CSS'
Very interesting!!!! Thanks a lot!! :)
Is it possible to use a gradient as a background, as in it is the size of the webpage?
Now I can hypnotize the customers that come to my website 😂😂😂😂
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
which editor did you use?
i mean online editor
Thank you very much
hello, a question is there a css tutorial that i can follow in which, on mouseover, a text changes color?
look for :hover :)
in my visual studio code liner gradient(to left ) is not working
why ??
linear-gradient, not liner, maybe?
@@KevinPowell spelling was right linear-gradient()
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.
Can we use linear gradient for progress bar animation?
I have seen linear gradient being used, but not radial. You could make some trippy radial animations haha
I'm sure you've seen linear-gradient used just for this a bunch already! Works great. Maybe I could do a video on it maybe one day.
Amazing!!
Thank you sir
Nice one
very helpful video ; thanks ; dude;
Nice Tut
really helpful thx YYDS for code
good work
Hey, thanks Nice vidéo !
Smart way to use it. :)
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?
Kev, css gradient borders when? ❤️
Awesome!!!
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
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.
how do I fix gradient banding in css
which one better for html,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.
Hi what IDE are you using?
In this video I was using Codepen... normally I use VS Code
i got hypnotized
thank you
I’m still at the stage I forget the period on class names in the css
The next stage is when you put periods on element selectors and can't figure out why they aren't working 😅
@@KevinPowell
Can’t wait!
😂
CSS seems like a really good alternative to Graphic Design with Adobe Suite.
What is the name of program you use
Code pen
thanks, great.