Color Tools
Color Palette Generator
Create harmonious five-swatch colour schemes with real colour-theory maths. Lock swatches and copy HEX, RGB or CSS variables.
Use Tool
Color Tools
CSS Gradient Generator Online (Linear & Radial)
Create smooth linear and radial CSS gradients online. Add multiple colour stops, control the angle and copy cross-browser background CSS in one click.
Gradient type
135°
Curated presets
Colour Stops (max 6)
How to Use the Gradient Generator
Follow these three steps to process your assets directly in the browser.
1
Select linear or radial mode
Choose a directional linear gradient with a 0-360 degree dial, or a circular radial gradient.
2
Customise the colour stops
Pick colours and drag each stop position between 0% and 100%. Add extra stops for richer blends.
3
Copy the CSS
Copy the generated background declaration straight into your stylesheet.
Key Features of the Gradient Generator
Linear and radial modes
Switch between angled linear blends and radial spotlight effects without losing your stops.
Up to six colour stops
Each stop has its own colour and precise 0-100% position slider.
360 degree angle dial and presets
Scrub any angle or jump to the common 45, 90, 135, 180 and 270 degree values.
Curated designer presets
Start from hand-tuned gradients and adjust them to your brand colours.
How the gradient generator works and best practices for modern web projects.
How CSS gradients work
CSS gradients are generated by the browser layout engine as resolution-independent images. Unlike a JPG or PNG background, a linear-gradient() declaration costs under 100 bytes of text and never pixelates on a 4K or 5K display.
A linear gradient transitions colours along an axis defined in degrees, where 135deg runs diagonally from top-left to bottom-right. A radial gradient radiates outward from a central origin point.
Tips for smooth, natural gradients
To avoid a muddy grey dead zone in the middle of a two-colour blend, choose hues within 30-90 degrees of each other on the colour wheel, or insert a third stop at the 50% mark to steer the transition through a vibrant midpoint.
Gradient Generator — Frequently Asked Questions
background: linear-gradient(angle, colour position, colour position); for example background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
Yes. Click Add colour stop to create up to six stops and position each one independently.
No. They need zero HTTP requests and a single line of CSS, so they are faster than any background image.