CSS Gradient Generator

A CSS linear gradient is an image generated by the browser that blends smoothly from one color to another along a straight line. This tool outputs the most common form: linear-gradient(<angle>deg, <color1>, <color2>) assigned to the background property. The angle defines the direction the line points in: 0deg runs bottom to top, 90deg runs left to right, and 180deg runs top to bottom, increasing clockwise. With only two color stops and no explicit positions, the browser places the first color at 0% and the second at 100%, transitioning evenly across the box. Because a gradient is treated as a background image, it paints behind text and other content and scales to any element size without becoming pixelated, unlike an exported PNG. The two colors here come from native HTML color inputs, so they are always 6-digit hex values such as #535beb. This generator covers the simple two-stop case only. For radial or conic gradients, three or more color stops, explicit stop positions like 20% 80%, repeating gradients, or vendor prefixes for very old browsers, you will need to extend the declaration by hand.