Degree's In Gradients CSS ( CSS Tutorial #17)

in blurtutorials •  4 years ago  (edited)

So yesterday we saw some amazing stuff related to gradients. Let us play more with gradients today.

Final Output :

Screenshot from 2020-11-08 23-16-17.png

So what you have to do...?

Step 1 :


Change the radial gradient to linear gradient from last tutorial. and see the output.
Code :

Screenshot from 2020-11-08 23-16-32.png

Output :

Screenshot from 2020-11-08 23-15-57.png

Step 2 :


Add the degree code in Linear gradient and see the output.

Code :

Screenshot from 2020-11-08 23-16-37.png

Output :

Screenshot from 2020-11-08 23-16-17.png

So you see using degree property you can give a change in angle to your design

Full Code :

   {      
     <!DOCTYPLE HTML>
  <html>
 <head>
  <meta charset="utf-8">
<title>DIV AND SPAN</title>
 <style>
html{
background:linear-gradient(25deg , #187 , #111 , #187 ,#111 , #187, #111 , #187 ,#111 , #187, #111 , #187 ,#111 , #187, 
#111 , 
#187 ,#111 , #187, #111 , #187 ,#111 , #187, #111 , #187 ,#111 , #187, #111 , #187 ,#111 , #187, #111 , #187 ,#111 , #187, 
#111 , #187 ,#111 , #187, #111 , #187 ,#111 , #187, #111 , #187 ,#111 , #187, #111 , #187 ,#111 , #187, #111 , #187 ,#111 ,      
#187, #111 , #187 ,#111 , #187, #111 , #187 ,#111 , #187, #111 , #187 ,#111 , #187, #111 , #187 ,#111 , #187, #111 , #187 
,  #111 , #187);

  height:100%;
  }

  </style>
  </head>
  <body>
  </body>
  </html>

Thank You for being here.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE BLURT!
Sort Order:  

Congratulations! This post has been upvoted by the @blurtcurator communal account,
You can request a vote every 12 hours from the #getupvote channel in the official Blurt Discord.Don't wait to join ,lots of good stuff happening there.