Why does the dial line point to the right at 0 degrees?

Because the reference line starts horizontal while zero degrees in CSS points up. The line is rotated by the angle minus ninety to compensate, which is why 0 degrees shows it pointing up on the dial.

How are the direction keywords spaced?

There are eight of them, forty-five degrees apart. An angle between two keywords reports whichever is nearer, measured as circular distance so values near 360 resolve correctly.

How many turns is 90 degrees?

A quarter — the panel reports it in decimals, so ninety degrees reads as 0.250 turn, alongside about 1.571 radians.

Can I get an exact direction rather than a keyword?

Only the eight common keywords are covered, so an unusual angle reports the closest of them rather than a custom name. The degrees row always gives the precise value.

Can I paste the turns or radians row straight into CSS?

Yes — CSS accepts all three units in a gradient function, so 90deg, 0.25turn and 1.5708rad are the same direction written three ways. The keyword row is the one that only applies inside a gradient, since direction keywords are not valid anywhere else.

Gradient Angle Calculator

Angle: 90°

Equivalents

degrees

90deg

turn

0.250turn

rad

1.571rad

nearest keyword

to right

You Might Also Need

Gradient Angle Adjuster

Adjust the angle of a linear gradient

Gradient Reverser

Reverse the stops of a linear gradient

Gradient Previewer

Preview any CSS gradient instantly

Conic Gradient Generator

Build conic gradients with center & angle

The gradient angle calculator converts a degree value into every equivalent form a gradient direction can take — degrees, turns, radians and the nearest direction keyword — with a dial showing which way it points.

What is Gradient Angle Calculator?

The gradient angle calculator pairs an angle slider with a circular dial whose line rotates to show the direction.
To the right, an Equivalents panel gives four rows for the same angle: degrees, turns, radians, and the nearest CSS direction keyword.
Everything updates as the slider moves.

The reason there are four rows rather than one is that CSS accepts all four forms for the same direction, and they arrive from different places. Degrees come from design tools and the angle slider in a gradient builder. Turns come from animation and design documentation, where a value like a quarter turn is easier to reason about than ninety degrees. Radians come out of calculation functions and geometry code. And keywords come from hand-written CSS, where to bottom right is both readable and unambiguous. Having the table in front of you removes the arithmetic, and the degrees row is formatted so the value can be pasted directly into a gradient declaration.

The nearest keyword row is the part with a real decision inside it. There are only eight keywords in common use — to top, to top right, to right, to bottom right, to bottom, to bottom left, to left and to top left — so they sit forty-five degrees apart around the circle, and any angle between two of them has to resolve to one or the other. The tool finds the closest by measuring the circular distance between the angle and each of the eight, normalising first so that anything at or above a full turn wraps around properly. That normalisation is what makes three hundred and sixty degrees resolve to to top rather than to to top left, and it is the detail that a naive implementation gets wrong, because an unwrapped angle is the largest possible distance from zero rather than the same direction as it.

Degrees and radians deserve a note about what the conversion means. Radians are the mathematically natural unit — a full circle is two pi — so a quarter turn is a value a bit above one and a half, and the rounded figures here are meant for reading rather than for computing. If you are writing a calculation, use the exact expression rather than a rounded decimal.

The dial is drawn the way CSS measures: the line rotates by the angle minus ninety degrees, because the reference line starts pointing right while zero degrees in CSS points up. That makes this a gradient angle to keyword conversion at a glance as well as a numeric one. That offset is easy to get wrong by hand and is the reason a direction you set in a builder sometimes comes out rotated ninety degrees when you transcribe it into a diagram.

What the tool does not do is generate a gradient — it converts and explains, and the angles it reports are the ones you feed to a builder.

It does not generate a gradient — it converts and explains angles, so a ramp still needs a builder.
It only knows the eight keywords, so an angle of, say, twenty-two degrees reports the nearest of them rather than the direction it actually points to.
Used as a css gradient direction reference, though, it answers the question that comes up constantly when reading other people's stylesheets, and as a degrees to turn css and gradient direction converter it covers all four spellings in one view.

How to use Gradient Angle Calculator

Move the slider to the angle you are working with, or read it off an existing gradient.
Read the dial to confirm which way that direction points on screen.
Take the equivalent you need — degrees for a declaration, turns or radians for documentation.
Use the nearest keyword row when you want the readable form in your CSS.

When to use Gradient Angle Calculator vs related tools

Use this when translating a gradient direction between degrees, turns, radians and keywords, or when checking which way an angle points. Use the gradient angle adjuster when you need to build the gradient itself rather than convert its direction. When the answer has to become a gradient rather than a number, the gradient angle adjuster is the same slider with stops attached, and a ramp that needs flipping without being rebuilt is what the gradient reverser does.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.