Speciying Angle in CSS3 Linear Gradients

Question

I am using CSS3 linear gradient as background, currently I'm using left to right gradient, but I want to specify gradient from bottom left to top right but not able to figure out what should be the value of angle for that.

background: linear-gradient(to right,#7E0F4B, #1A5865); 

Answer 1

When the gradient needs to go from side(s) to side(s), its always better to use the to [side] [side] syntax instead of using angles. You'll find a detailed explanation on why this syntax is better than the angles in my answer here.

For this particular case, you sort of have your answer in the question itself. The gradient needs to go from bottom-left to top-right and so the first parameter to the linear-gradient function should be to top right.

CSS gradient syntax supports both the to [side] syntax and the to [side] [side] (in other words the to corner) syntax. Below is an extract from the W3C Spec (emphasis is mine):

using keywords

If the argument is to top, to right, to bottom, or to left, the angle of the gradient line is 0deg, 90deg, 180deg, or 270deg, respectively.

If the argument instead specifies a corner of the box such as to top left, the gradient line must be angled such that it points into the same quadrant as the specified corner, and is perpendicular to a line intersecting the two neighboring corners of the gradient box. This causes a color-stop at 50% to intersect the two neighboring corners (see example).

body {
  background: linear-gradient(to top right, #7E0F4B, #1A5865);
  min-height: 100vh;
}