How does CSS gradient angle direction work?

0deg points upward (to top) and the angle increases clockwise. 90deg goes to the right, 180deg goes downward (to bottom), and 270deg goes to the left.

What are the named gradient directions?

CSS supports cardinal keywords such as "to top", "to right", "to bottom", and "to left". Corner keywords also exist, but their effective angle follows the box aspect ratio, so they are not generally equivalent to fixed 45-degree increments.

Can I enter the angle manually?

Yes — click the degree input field and type any integer from 0 to 360. The compass dial will update to match.

Does this tool support radial or conic gradients?

This tool focuses on linear-gradient() direction angles. For radial and conic gradients, use the CSS Gradient Generator tool.

What is the default angle?

The default is 90deg (to right), the most common horizontal gradient direction used in web design.

Gradient Angle Picker

Drag the compass dial to pick any gradient angle and instantly copy the CSS linear-gradient() declaration.

Angle Dial

Angle: deg

to right

Start Color

End Color

Live Preview

CSS Output

Degree syntax


                            linear-gradient(90deg, #6366f1, #ec4899)

Named direction


                            linear-gradient(to right, #6366f1, #ec4899)

Copied to clipboard!

Common Angles

Summary

The Gradient Angle Picker lets you set any CSS linear-gradient() direction by dragging an interactive compass dial. It shows the exact degree value, the equivalent named direction when applicable, a live gradient preview, and a ready-to-paste CSS snippet. Adjust the start and end colors to preview exactly how the gradient will look at your chosen angle.

How it works

Drag the handle on the compass dial or click anywhere on the dial to set the gradient angle.
Type an angle directly into the degree input field for precise control.
Pick start and end colors using the color pickers.
The live gradient preview and CSS output update instantly.
Click Copy CSS to copy the linear-gradient() declaration to your clipboard.

Use cases

Quickly find the exact degree for a diagonal hero background gradient.
Confirm the correct angle for matching gradients across multiple UI elements.
Learn which numeric degrees correspond to named directions like "to right" or "to bottom left".
Copy ready-to-use CSS for buttons, cards, and section backgrounds.
Explore how small angle changes affect gradient flow in a design.

Frequently Asked Questions

Last updated: 2026-05-28 · Reviewed by Nham Vu