CSS Gradient Generator NZ

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.

Calculate.co.nz is proud to be partnered with Health Based Building, a leader in sustainable and health-conscious building innovation. With over a century of experience, they develop high-performance systems like Foreverbreathe Specification, Magnum Board, and Foreverbreathe Paints to support energy-efficient, non-toxic living environments. Their commitment to healthier homes aligns with our belief that informed choices lead to better outcomes for Kiwi households.
Calculate.co.nz partner: Health Based Building
Advertise on this page
background: linear-gradient(135deg, #2f6fb0, #28a745);

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

How it works

The two chosen colours and the angle are assembled into a CSS linear-gradient function, written as the background property. The angle sets the direction of the blend, measured clockwise from pointing straight up. The live preview applies the same gradient to a box so you can see the result exactly as a browser will render it.

Worked example

Choosing a blue start colour, a green end colour and an angle of 135 degrees produces the code background: linear-gradient(135deg, #2f6fb0, #28a745); The preview box fills with a diagonal blue-to-green blend running from the top-left to the bottom-right, the direction a 135 degree angle gives.

Related calculators

Frequently asked questions

How do I use the gradient code?

Copy the generated line, such as background: linear-gradient(135deg, #2f6fb0, #28a745); and paste it as the background of any element in your CSS, like a div, button or hero section. It works in all modern browsers with no vendor prefixes needed.

What does the angle mean?

The angle sets the direction of the blend, measured clockwise from straight up. So 0 degrees blends from bottom to top, 90 degrees from left to right, 180 degrees from top to bottom, and 135 degrees runs diagonally from the top-left to the bottom-right, a popular choice.

How do I make a good-looking gradient?

Blends between two closely related colours look subtle and professional, while contrasting colours make a bold statement. A diagonal angle such as 135 degrees often looks the most natural. If text sits over the gradient, check it stays readable across the whole blend.