Gradient Angle Visualizer
Rotate a gradient and copy the matching CSS angle.
Get the gradient angle right
A linear gradient’s angle changes its whole feel, and the CSS angle system (0deg points up, not right) trips people up. This visualizer lets you rotate a gradient and see the matching CSS angle, so the direction you want maps to the value you copy.
Rotating it visually removes the mental math and the surprise of a gradient pointing the wrong way. Dial in the direction, read off the correct angle, and copy it into your linear-gradient() declaration.
Angles, previewed
In CSS 0deg points up and angles increase clockwise, which is why gradients often face the wrong way. The visualizer renders each angle live in your browser.
Frequently asked questions
What does the gradient angle visualizer do?
It previews a linear gradient at a selected angle and prints the CSS background value.
Which direction does 0deg point?
Up. 0deg runs the gradient from bottom to top, 90deg from left to right, and 180deg (the default when no angle is set) from top to bottom.
What is the difference between "to right" and 90deg?
For horizontal and vertical directions they match. Diagonal keywords like "to top right" aim at the corner, so their angle changes with the element's aspect ratio, while a degree value stays fixed.
Can I add more color stops?
The output has a start and end color, and you can insert more stops in the copied CSS, such as linear-gradient(135deg, #0ea5e9, #a855f7 50%, #f97316).
Related tools
Need a polished visual system? Bushe can help turn rough ideas into production-ready design.