Linear Gradient in CSS

Question

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>

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.

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?

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

score 0 · Accepted Answer · edited May 06 '23 at 16:48

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);

edited May 06 '23 at 16:48

InSync

4,851
4
8
30

answered Mar 12 '21 at 11:17

Ammad Amir

433
3
7

I tried this too but it was not working. Ok thanks I have already tried method from duplicate question. – Mar 12 '21 at 11:23

Linear Gradient in CSS

1 Answers1

Linked