Search code examples
csslinear-gradients

Why does gradient turns upside down when 0deg is applied?

I am learning CSS Gradients, I observed something and I am not able to understand it. For a class ~ 'box', I applied the following CSS

.box{
  width: 50vw;
  height: 70vh;
  background-image:
    linear-gradient(red, blue);
}
<div class="box"></div>

And I got the expected result, however, I then added a - 0deg property (as seen in the code below) the gradient just flipped vertically. Why did it happen? Shouldn't there be no changes as I wrote 0deg

.box{
  width: 50vw;
  height: 70vh;
  background-image:
    linear-gradient(0deg, red, blue);
}
<div class="box"></div>

Solution

  • According to this post, the default angle is "to bottom", i.e. from top to bottom. This is equal to 180 degrees. 0 degrees is equal to "to top".

    So it's simply a case of the default being 180 degrees.