CSS's degrees

[peak ravine]

How do degrees work in the CSS?
I thought they were like trigonometric circle but they weren't, ofc it's not a problem I just wanna know how they work.

[manic hull]

I made this for you, maybe it will help
https://codepen.io/tok124/pen/OJKbqYR

[peak ravine]

ty bro ❤️

[manic hull]

No problem 🙂

[peak ravine]

bro as you see in your trigonometric circle 180 degree is a vertical line but when i use 180 deg in my project the lines become a horizontal line

so they dont work like that

[manic hull]

Yeah. in linear gradient 0 degrees is vertical bottom to top, 90degrees is horizontal left to right, 180degrees is vertical top to bottom, 270 degrees is horizontal right to left

[peak ravine]

they may be clockwise which is the opposite of mathematics

[peak ravine]

but bro 0 and 180 are horizontal left to right

and 90 and 270 are vertical

[manic hull]

0 degrees is vertical bottom to top,
90degrees is horizontal left to right,
180degrees is vertical top to bottom,
270 degrees is horizontal right to left

@peak ravine and btw, 180deg is the default

[peak ravine]

The movement of the colors is vertical, but the colors themselves are horizontal

[peak ravine]

for 0 and 180

[manic hull]

there is nothing horizontal with 0/180deg. Except from how they are written in the code. But that does not affect the gradient itself

background: 
  linear-gradient(
    0deg,
    red, 
    blue
  );

gives same result as

background: linear-gradient(0deg,red, blue);

[peak ravine]

bro now i know how the degrees work in the css

it is the opposite of mathematics

[peak ravine]

look at the single color

[manic hull]

i have always seen 0 degrees as being at the top

like in this example

but if it makes it easier for you, you can do something like

background:conic-gradient(from 90deg, red 180deg, blue 0);

You see here

so it starts from 90 deg which is same as 0 deg as you know it

[peak ravine]

oh so you mean these degrees are for the type of movement of the colors not to the coordinates of the colors themselves?

in 0 and 180 they are mixed from top to bottom (vertical)

[manic hull]

Well. linear-gradient and conic-gradient is a lot different type of gradients. So the degrees are kinda different between linear and conic

[manic hull]

Yeah

[peak ravine]

i got it

ty bro

[manic hull]

it would make more sense if in linear gradient 0deg was top to bottom and 180deg was bottom to top. That makes more sense to me at least

[manic hull]

No problem 🙂

[peak ravine]

should i delete this post?

[manic hull]

no need to delete it, you can close it if you want