Gradient Angle Compass Direction Map
Convert an exact compass direction to its CSS linear-gradient angle, measured clockwise from upward.
Description
CSS linear-gradient angles are measured clockwise from upward: 0 degrees points north and 90 degrees points east.
CSS linear-gradient angles are measured clockwise from upward: 0 degrees points north and 90 degrees points east. This differs from coordinate conventions that measure angles from the positive horizontal axis.1
Convert an exact compass direction to its CSS linear-gradient angle, measured clockwise from upward.
When to use Gradient Angle Compass Direction Map
Use this tool to convert an exact compass direction to its CSS linear-gradient angle, measured clockwise from upward.
Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
How to use Gradient Angle Compass Direction Map and understand its results
- Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
- Enter direction using the field table and calculation rules, then run the tool.
- Read angle. The explanation below defines the units, signs, ordering and any flags or placeholder values.
- If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
| Input field | Meaning | Value type; see rules below | Requirement |
|---|---|---|---|
| direction | Compass direction | string; one of north, northeast, east, southeast, south, southwest, west, northwest | Required |
Choose one of the eight lowercase compass direction tokens. A fixed lookup returns its degree angle. No interpolation, angle wrapping or geometric computation is needed.
north=0°, northeast=45°, east=90°, southeast=135°, south=180°, southwest=225°, west=270°, northwest=315° Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| angle | CSS gradient angle | number; minimum: 0; maximum: 360 |
{
"input": {
"direction": "east"
},
"output": {
"angle": 90
}
}Limitations and assumptions
It maps compass directions to exact numeric angles rather than computing CSS corner-keyword geometry for an arbitrary box. For a nonsquare box, to top right need not be equivalent to a fixed 45-degree line. It does not generate color stops or render a gradient.
Numeric inputs must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Extremely large text inputs are rejected. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.
Alternative or Complementary methods
Use Conic-Gradient Degree Segments Pie Fractions: Convert nonnegative pie weights into consecutive conic-gradient angle stops totaling one turn. For a complementary task, use background-position Percent Alignment Formula: Resolve one background-position percentage as a pixel offset from the near edge using positioning-area size minus rendered-image size; oversized images and out-of-range percentages are allowed.
References
-
Gradient Angle Compass Direction Map — tool.io
Similar or alternative tools
- Conic-Gradient Degree Segments Pie Fractions
Convert nonnegative pie weights into consecutive conic-gradient angle stops totaling one turn.
- background-position Percent Alignment Formula
Resolve one background-position percentage as a pixel offset from the near edge using positioning-area size minus rendered-image size; oversized images and out-of-range percentages are allowed.