Generate linear, radial and conic CSS gradients from your own color stops. Drag stops along the bar, set the angle, seed colors from a harmony scheme, a Codigrate theme or an image, and copy ready-to-use CSS, while checking the palette's harmony, temperature and color-blindness readability so your designs stay accessible.
How it works
Color stops and an angle become CSS you can paste into any stylesheet
A gradient is a list of color stops, each with a position along the bar, drawn as linear, radial or conic. Drag a stop to move it, click a tile to change its color, set the angle, and the CSS updates as you go. The link holds the stops, the type and the angle, so a gradient can be shared and reopened as it was.
The stops are analyzed like a palette: channels, harmony, tints and shades, temperature and color vision, all computed in your browser. Start the stops from your own colors, a harmony scheme, an image or a Codigrate theme, or take a palette you already built.
Questions
- How do I use the gradient in CSS?
- Copy the CSS and set it as the background of any element, for example background: linear-gradient(90deg, #ff9a00 0%, #ff0080 100%). Radial and conic gradients work the same way, and every modern browser supports all three.
- What is the difference between linear, radial and conic?
- A linear gradient runs along a straight line at the angle you set. A radial gradient spreads outward from the centre in circles. A conic gradient sweeps around the centre like a color wheel, starting at the angle.
- How many color stops can I add?
- Two to ten. Each stop has its own position from 0% to 100%; drag it along the bar or type the number in the Position field.
- Can I make a gradient from an image or a theme?
- Yes. Choose From Image to extract the dominant colors of a picture, or Codigrate Themes to start from one of the 23 theme palettes. Both build the stops for you; then adjust the positions and the angle.
