🌈 Gradient Generator
Design linear, radial or conic CSS gradients with live preview and copy the generated background property.
Gradient Type
Direction & Angle
deg
Radial Options
Conic Options
°
Color Stops
%
Opacity
%
Live Preview
Generated CSS
background: ;
.element {
background: ;
}
background: ;
}
Presets
Click to apply💡 Tips
- • Drag the angle dial or arrow buttons to set direction instantly
- • Click any colour swatch to open the OS colour picker
- • Opacity slider on each stop enables transparency effects
- • "Distribute Evenly" spaces stops at equal intervals
- • Click the CSS code block to copy the full rule
Related Tools
🎨
🖌️
🎨
📱
Color Palette Generator
Build a coordinated colour palette from a base shade and copy every hex code for CSS or design work.
Color Picker
Choose a colour and copy it in HEX, RGB, RGBA, HSL or HSV, with sliders for each channel.
Hex to RGB Converter
Convert hex to RGB and HSL, view each channel, and copy the matching CSS colour declarations.
QR Code Generator
Encode a URL or block of text as a QR code, choose its size and colours, and download the result as a PNG.
The CSS gradient syntax this tool produces
CSS gradients are generated images, so they go into a background or background-image property rather than a colour property. The three functions differ in how colour is distributed.
A linear gradient runs colours along a straight line: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%). The angle controls direction, with 0deg pointing to the top and values increasing clockwise, so 90deg points right and 180deg points down. Keywords such as to bottom right are equivalent alternatives.
A radial gradient radiates from a centre point outward: radial-gradient(circle farthest-corner at center, #4f46e5 0%, #ec4899 100%). The shape is a circle or an ellipse, and the size keywords closest-side, closest-corner, farthest-side and farthest-corner determine where the final colour stop lands relative to the container's edges.
A conic gradient sweeps colours around a centre point like a pie chart: conic-gradient(from 45deg at center, #4f46e5 0%, #ec4899 100%).
In all three, colour stops carry a position from 0 to 100 per cent, and the browser interpolates smoothly between adjacent stops. Stops with reduced opacity are written as rgba values.
A linear gradient runs colours along a straight line: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%). The angle controls direction, with 0deg pointing to the top and values increasing clockwise, so 90deg points right and 180deg points down. Keywords such as to bottom right are equivalent alternatives.
A radial gradient radiates from a centre point outward: radial-gradient(circle farthest-corner at center, #4f46e5 0%, #ec4899 100%). The shape is a circle or an ellipse, and the size keywords closest-side, closest-corner, farthest-side and farthest-corner determine where the final colour stop lands relative to the container's edges.
A conic gradient sweeps colours around a centre point like a pie chart: conic-gradient(from 45deg at center, #4f46e5 0%, #ec4899 100%).
In all three, colour stops carry a position from 0 to 100 per cent, and the browser interpolates smoothly between adjacent stops. Stops with reduced opacity are written as rgba values.
Worked example: building a three-stop diagonal gradient
Select the linear type and set the angle to 135deg, which runs from the top-left corner towards the bottom-right. Set the first colour stop to #4f46e5 at position 0 per cent and the second to #ec4899 at 100 per cent. The generated CSS reads:
background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
Now add a third stop of #f59e0b at 50 per cent. The output becomes linear-gradient(135deg, #4f46e5 0%, #f59e0b 50%, #ec4899 100%), and the preview shows the amber band cutting across the middle of the diagonal. Move that stop to 25 per cent and the amber shifts towards the indigo end, compressing the indigo-to-amber transition into the first quarter and stretching the amber-to-pink transition across the remaining three quarters.
Switching the type to radial with a circle shape and farthest-corner sizing produces radial-gradient(circle farthest-corner at center, #4f46e5 0%, #f59e0b 50%, #ec4899 100%), which turns the same three colours into concentric rings. Switching to conic with a start angle of 0deg wraps them around the centre instead, producing a colour wheel segment effect.
background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
Now add a third stop of #f59e0b at 50 per cent. The output becomes linear-gradient(135deg, #4f46e5 0%, #f59e0b 50%, #ec4899 100%), and the preview shows the amber band cutting across the middle of the diagonal. Move that stop to 25 per cent and the amber shifts towards the indigo end, compressing the indigo-to-amber transition into the first quarter and stretching the amber-to-pink transition across the remaining three quarters.
Switching the type to radial with a circle shape and farthest-corner sizing produces radial-gradient(circle farthest-corner at center, #4f46e5 0%, #f59e0b 50%, #ec4899 100%), which turns the same three colours into concentric rings. Switching to conic with a start angle of 0deg wraps them around the centre instead, producing a colour wheel segment effect.
Using the gradient in a real layout
Paste the generated line into a rule for the element you want to fill. Because a gradient is a background image, set a background-color fallback beneath it if the element must stay readable when images are disabled. For a full-viewport hero, remember the gradient sizes to the element's box, so the element needs an explicit height or enough content to fill.
For gradient text, apply the gradient as the background, then add background-clip: text and color: transparent. Include the -webkit-background-clip prefix for wider support, and always check the contrast of the darkest stop against the page behind it.
Banding is the most common visual problem. Gradients between two very close colours across a wide area produce visible steps because of 8-bit colour quantisation; adding an intermediate stop or a very subtle noise overlay usually hides it.
Conic gradients are the right tool for pie charts, loading rings and colour pickers, but they arrived later than the other two, so verify support if you need to cover older browsers. Finally, be careful placing text over a multi-stop gradient: contrast that passes at one end of the sweep often fails at the other.
For gradient text, apply the gradient as the background, then add background-clip: text and color: transparent. Include the -webkit-background-clip prefix for wider support, and always check the contrast of the darkest stop against the page behind it.
Banding is the most common visual problem. Gradients between two very close colours across a wide area produce visible steps because of 8-bit colour quantisation; adding an intermediate stop or a very subtle noise overlay usually hides it.
Conic gradients are the right tool for pie charts, loading rings and colour pickers, but they arrived later than the other two, so verify support if you need to cover older browsers. Finally, be careful placing text over a multi-stop gradient: contrast that passes at one end of the sweep often fails at the other.
Frequently Asked Questions
Use a gradient function in the background property, such as background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%). Gradients are generated images, not colours, so they belong in background or background-image and not in the color property. Build the stops visually here and copy the generated line straight into your stylesheet.
It sets the direction of the gradient line. In CSS, 0deg points to the top of the element and angles increase clockwise, so 90deg runs left to right, 180deg runs top to bottom, and 135deg runs diagonally from the top-left corner towards the bottom-right. The keyword equivalent of 135deg is to bottom right.
Yes. Add as many colour stops as you need, each with its own colour and a position between 0 and 100 per cent. The browser interpolates between adjacent stops, so moving a middle stop closer to one end compresses that transition and stretches the other. Three or four stops is usually the practical limit before the result looks muddy.
Set the gradient as the element's background, then add background-clip: text with the -webkit-background-clip prefix, and set color: transparent so the background shows through the letterforms. Check contrast carefully, because a gradient that is light at one end can make part of the text unreadable against a pale page background.
A linear gradient blends colours along a straight line at the angle you choose. A radial gradient blends outward from a centre point in a circle or ellipse, producing a glow or spotlight effect. A conic gradient sweeps colours around a centre point at increasing angles, which is what makes pie charts and progress rings possible in pure CSS.