CSS Gradient Generator

This tool generates ready-to-use CSS linear-gradient code from two colours and a direction, with a live preview so you can see exactly how it will look. Gradients, smooth blends from one colour to another, are everywhere in modern web design: hero sections, buttons, cards, backgrounds and overlays all use them to add depth and visual interest that a flat colour cannot. Writing the CSS by hand is fiddly, though, because you have to remember the syntax, get the angle right, and guess at the colours without seeing the result. This generator removes all of that. You choose a start colour, an end colour, and the angle of the blend in degrees, where 0 points the gradient upward, 90 to the right, 180 downward and so on, and the calculator builds the CSS linear-gradient code and renders a live preview in those exact colours. Both the code and the preview update instantly as you adjust the colours or the angle, so you can dial in the look you want and then copy the finished CSS straight into your stylesheet. Use it to design backgrounds, buttons and cards, to experiment with colour combinations, or to learn how the linear-gradient syntax works. The generated code uses the standard CSS background property, so it works in every modern browser without prefixes. A few design tips: gradients between two closely related colours look subtle and professional, while strongly contrasting colours make a bold statement; a 135 degree diagonal is a popular, natural-looking choice; and for text laid over a gradient, make sure there is enough contrast across the whole blend for it to stay readable. Copy the code and paste it into any element's background.

Standard CSS linear-gradient, works in all modern browsers. Angle: 0deg = up, 90deg = right, 180deg = down. Copy the code into any element's background.