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 shorthand keywords: "to top" (0deg), "to right" (90deg), "to bottom" (180deg), "to left" (270deg), and diagonal variants like "to top right" (45deg), "to bottom right" (135deg), "to bottom left" (225deg), and "to top left" (315deg).

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

Name: Gradient Angle Picker
Availability: InStock
Author: Nham Vu

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

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

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-06-09 · Reviewed by Nham Vu