Why are my gradient colors in the wrong place?

Tools to use

• Open this tool: CSS gradient generator

Compare 90 and 180 degrees

background: linear-gradient(90deg, #4F46E5 0%, #22D3EE 100%);

Use #4F46E5, #22D3EE and angle 90: the first color is left and the second right. At 180 they run top-to-bottom. CSS starts 0 degrees pointing up and increases clockwise, unlike a familiar horizontal mathematical zero. Establish these simple directions before adjusting diagonals.

Do not change angle and swap colors simultaneously while debugging direction. Change one input and inspect whether the degree value or color order changed in CSS. That makes the effect and reversal understandable.

Zero and one hundred percent are positions, not opacity

The percentages after the colors place them along the gradient line. Zero percent does not mean transparent, and one hundred does not mean opaque. Opacity belongs to the color's alpha. Distinguish extending a color region from changing its opacity or shade.

background: linear-gradient(90deg, #4F46E5 30%, #22D3EE 70%);

This is an edit to copied CSS at its destination. Stops at 30% and 70% keep the first color before the transition and the second after it. The current two-color screen has no dedicated stop-position field; do not paste a whole declaration into a color input.

Equal stop positions create a hard boundary

background: linear-gradient(90deg, #4F46E5 50%, #22D3EE 50%);

Putting both stops at 50% removes the transition interval and creates a hard switch. A gradient need not be a blurred band. In destination CSS, inspect stop positions when you want a split but see a broad intermediate region.

Compare preview and real-element proportions

The same angle and stops can look different in a square preview and a wide banner. Percentages locate positions along the gradient line, not simply marks across the screen width. Test the copied CSS on the real dimensions, corner shape and surrounding spacing.

For overlaid text, check the least readable background under the actual letters. Contrast Calculator evaluates supplied color pairs; it does not scan every gradient pixel or locate the text automatically. Check the varying background in the destination layout.

Choose colors, direction and positions separately

First fix direction with the basic 0%/100% pair, then adjust colors, and finally edit stops in destination CSS if needed. Changing one dimension at a time makes cause and effect clear. Finish with small and large layouts and real text, not only an empty color swatch.

The tool does not fetch background images or import another site's CSS. It creates a small declaration from supplied colors. Multiple backgrounds, animation and explicit interpolation spaces belong to separate destination CSS work; the declaration is not a complete background design.

Sources

• MDN — linear-gradient() (Opens in a new tab)

Tools to use

• CSS gradient generator