0

I have been learning CSS and I was trying the linear-gradient().

This works fine when I use "to right".

background-image: linear-gradient(to right,  #92EFFD, ##4E65FF);

My actual code is:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body{
        background-image: linear-gradient(to right, #92EFFD, #4E65FF)
      }
    </style>
  </head>
  <body>
  </body>
</html>

enter image description here

But when I remove "to right" it's like:

background-image: linear-gradient( #92EFFD, #4E65FF);

My actual code in this case:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      body{
        background-image: linear-gradient(#92EFFD, #4E65FF)
      }
    </style>
  </head>
  <body>
  </body>
</html>

The out put is this. enter image description here

What I wanted is to set the linear gradient top to bottom but it is not working

Am I doing wrong anywhere or my code is wrong. Can you help me out?

Ali Esmailpor
  • 1,215
  • 2
  • 9
  • 20
Neutral Me
  • 195
  • 14
  • 1
    Does this answer your question? [CSS3 gradient background set on body doesn't stretch but instead repeats?](https://stackoverflow.com/questions/2869212/css3-gradient-background-set-on-body-doesnt-stretch-but-instead-repeats) – michaeldel Mar 12 '21 at 11:03
  • min-height:100% on html – Temani Afif Mar 12 '21 at 11:47

2 Answers2

0

To set gradient position you can simply use "deg" you can open inspect element in your browser to adjust according to your requirement.

Default position is top to bottom background-image: linear-gradient(#92EFFD, #4E65FF);

background-image: linear-gradient(180deg , #92EFFD, #4E65FF);
Ammad Amir
  • 415
  • 3
  • 7
0

Try this tool if you want, I usually pick it for the CSS gradients and it helps me a lot!

https://cssgradient.io/

Alebacce
  • 81
  • 9