CSS Gradient Generator

How angle and colors create a linear gradient

The gradient generator accepts two HEX colors (in #RRGGBB format) and a rotation angle in degrees. The angle uses the CSS convention: 0 degrees points to the top, 90 degrees points to the right, 180 degrees points to the bottom, and 270 degrees points to the left, with the first color placed at the start of that direction line and the second at its end. The tool normalizes any angle input into the 0–359 degree range using modulo arithmetic, so 450 degrees automatically becomes 90 degrees, and −90 degrees becomes 270 degrees. Each color occupies the entire gradient at its respective endpoint: the first color fully saturated at 0% and the second color fully saturated at 100%.

A live 160-pixel preview bar renders the gradient in real time as you adjust inputs, showing exactly how the angle and color pair will appear when applied to an element. The CSS output string is ready to paste directly into a stylesheet as the value for a background property. The copy button captures the complete declaration, including the linear-gradient() function with normalized angle, both HEX colors, and the 0% and 100% stops. Browser vendor prefixes are not included; modern browsers render linear-gradient without them.

Computing linear-gradient with 90° from #1F6B45 to #E8F3EC

The tool starts with default inputs: first color #1F6B45 (a deep teal), second color #E8F3EC (a very light mint), and 90 degrees. Normalizing the angle 90 yields 90 (no change, since it already falls within 0–359). Plugging these values into the CSS template produces linear-gradient(90deg, #1F6B45 0%, #E8F3EC 100%). At 90 degrees the gradient line points to the right, so the deep teal sits at the left edge and blends rightward into the light mint at the right edge. The 0% and 100% stops are hardcoded; intermediate stops require manual CSS editing.

The modulo normalization handles wraparound: 450 degrees becomes 450 − 360 = 90 degrees; −90 degrees becomes −90 + 360 = 270 degrees (pointing left). This ensures every angle, whether positive, negative, or a multiple of 360, maps to a canonical 0–359 value that browsers interpret consistently.

Angle orientation and practical direction

The 0-degree angle runs bottom to top, the classic dark-base fade that reads as light coming from above. A 45-degree angle sweeps toward the top-right corner, a common choice for hero sections and buttons because the diagonal adds motion without dominating. The 90-degree angle runs left to right, useful for directional fades and for reducing visual weight on one side of an element. 180 degrees runs top to bottom, the standard choice for page headers that fade into content below.

Radial gradients (circles or ellipses) and conic gradients (angular sweeps around a center point) require separate CSS functions. This tool produces only linear gradients. For multiple stops or precise color transitions at intermediate positions, copy the output and manually add additional stops using the same syntax: color-name percentage-position.

Common gradient angles and visual effects

• 0 degrees (to top): first color at the bottom, second at the top, suggesting elevation and light from above; frequently paired with dark-to-light transitions.
• 45 degrees (to top-right): diagonal sweep from lower-left to upper-right, lending a dynamic, ascending quality.
• 90 degrees (to right): first color on the left flowing to the second on the right, ideal for side-by-side fades and subtle directional emphasis.
• 180 degrees (to bottom): first color at the top fading downward, the go-to for page headers and overlays that dissolve into the content.
• 270 degrees (to left): the mirror of 90 degrees, placing the first color on the right, handy when the layout's focal point sits on the right side.

Frequently asked questions

Related tools