linear gradient syntax not working in code playground

Not quite sure what I'm doing wrong. I am trying to create a linear gradient in the code playground. I have the code input into both html and css but the output isn't coming out like the example is showing me. I would really appreciate some insight! Thanks!

css css3 gradients

18th Apr 2017, 2:00 AM

Brandon Keith McFadden

5 Respuestas

+ 7

vw stands for Viewport Width; vh stands for Viewport Height; Both units represent 1% of the total size, so 100vw is the available width and 100vh is the available height...

19th Apr 2017, 4:16 PM

visph

+ 5

@Will Cavalcanti: Better practice to set 'body, div' instead '*', and you can even avoid it ( styling the body ) by just: div { position:absolute; left:0; top:0; width:100vw; height:100vh; background:linear-gradient(to bottom, red, yellow); }

18th Apr 2017, 4:38 AM

visph

+ 2

// the html: <body> <div></div> </body> // the css: *{ margin:0px; padding: 0px; height: 100%; } div{ background: linear-gradient(to bottom, red, yellow); } i just did this right now and it's working pretty well, not sure how is the exemple that you said is showing it

18th Apr 2017, 2:29 AM

Welliton Malta

+ 1

thanks for sharing, @visph. i just forgot about "vw" and "vh" and couldn't remember it, but my main purpose was to show the linear-gradient could work on here :D

18th Apr 2017, 4:41 AM

Welliton Malta

Thank you both for the help. Not sure why what I was doing yesterday wasn't working. I tried both of your examples and they worked. Another quick question, what does vw and vh mean? I haven't seen those used yet.

18th Apr 2017, 6:25 PM

Brandon Keith McFadden