Gradients in pure CSS
CSS gradients draw smooth colour transitions without any image file, so they load instantly, stay sharp on every screen and can be changed with one line of code. They are used for hero backgrounds, buttons, cards, text effects and loading placeholders. This generator writes the code for the three gradient functions supported by all modern browsers and shows a live preview as you adjust it.
Linear, radial and conic
- linear-gradient blends colours along a straight line. The angle sets the direction: 0deg runs bottom to top, 90deg left to right and 180deg top to bottom.
- radial-gradient spreads colours outward from a centre point, as a circle or an ellipse that follows the shape of the element. Move the centre to the top or a corner for a spotlight effect.
- conic-gradient sweeps colours around a centre like a colour wheel or pie chart. Start and end with the same colour for a seamless loop.
Colour stops
Each stop is a colour and a position from 0% to 100%. Between stops the browser blends smoothly. Two stops at the same position create a hard edge, which is how stripes and progress bars are made. Stops are written in order of position, so you can drag them freely. Up to five stops keep gradients readable; most attractive gradients use two or three related hues.
Design tips
Gradients between colours that are far apart on the colour wheel can pass through a muddy grey middle. Adding a third stop with a bright in-between colour, or choosing neighbouring hues such as coral to amber or blue to violet, keeps the blend vivid. When text sits on a gradient, check the contrast at both ends with the colour contrast checker, because a gradient that is fine at one side may be unreadable at the other.
The code you get
The output includes a solid background fallback set to your first colour, followed by the gradient. Very old browsers and some email clients ignore the gradient and show the solid colour instead. Paste the two lines into any CSS rule, a style attribute or a design tool that accepts CSS.