Choose two endpoints and a direction
The CSS Gradient Generator produces one linear gradient with two colors. Set First color, Second color, and Angle (degrees), then generate the result. The tool shows a preview and a complete background declaration that can be copied into a CSS rule or downloaded as gradient.css.
The angle runs from 0 through 360 degrees. In CSS, 0 degrees points upward and 90 degrees points toward the right. The CSS Images specification defines that direction convention. It is easy to reverse the intended effect if you assume the angle follows a different graphics application’s convention.
Make a left-to-right example
Set First color to #111111, Second color to #EEEEEE, and Angle to 90. The expected declaration is:
background: linear-gradient(90deg, #111111, #eeeeee);Hexadecimal letter case may vary without changing the color. The preview should start dark on the left and become light on the right. Set the angle to 270 to reverse that direction while keeping the endpoint order unchanged.
Place the declaration inside a selector in your stylesheet, for example a banner rule, and give that element dimensions or content so its background is visible. The downloaded declaration is not an entire HTML component and does not add padding, typography, or a heading on its own.
Check the gradient where content sits
Text placed over a gradient must remain readable across the area behind it. A contrast check at only the first color can miss a problem at the other endpoint or in the transition. Test the actual layout at different viewport sizes because responsive wrapping can move text over a different part of the background.
The generator does not calculate contrast. WCAG’s contrast criterion applies to the text and its background, so a solid backing behind important text can make evaluation more predictable. Use Color Palette Generator to explore alternatives without assuming a visually coordinated pair is automatically readable.
Keep the generated scope clear
This tool exposes two opaque color inputs and one angle. It does not offer radial gradients, custom color-stop positions, transparency stops, or animation controls. Those require further CSS editing after you understand the generated declaration.
Generation happens in your browser and needs no image upload. Review the result in your own page after copying it; existing CSS, background shorthand, and a later rule can affect what is ultimately displayed.