CSS Gradient Generator

1. Choose Linear, Radial or Conic, or tap one of the Presets below the tool to start from a ready gradient.
2. For linear and conic gradients, drag the dial or type the angle. For radial gradients, pick circle or ellipse. Radial and conic gradients also have sliders for the centre point.
3. Edit the colour stops: drag the handles on the strip, or set each stop's colour and position in the list. Use Add stop for up to six colours, and the ✕ button to remove one.
4. Press Random gradient when you want ideas, or Reverse colours to flip the gradient end to end.
5. Watch the preview update, then press Copy CSS and paste the two lines into your stylesheet.

Gradients in plain CSS

A CSS gradient generator writes the code for a smooth blend between colours, so you don't need an image file for a background, a button or a hero banner. Gradients are drawn by the browser, scale to any screen size without going blurry, and cost nothing to download. Every current browser, including Chrome and Safari on cheap Android phones and older iPhones, supports all three types without vendor prefixes like -webkit-.

The three types

How the syntax works

In a linear gradient the angle sets the direction: 0deg runs from bottom to top, 90deg from left to right and 180deg from top to bottom. Each colour stop is a colour plus a position. Between two stops the browser blends smoothly. If two stops share the same position, you get a hard edge instead of a blend, which is how the Tiranga preset draws three clean bands of saffron, white and green.

For a conic gradient, from 90deg sets where the sweep starts, and the stop positions are shares of the full circle. The Pie preset uses hard edges at 40% and 75% to draw a three-slice pie chart with no image and no JavaScript.

Worked example

Say you want a warm button for a Diwali sale. Tap the Mango preset, which runs from yellow to orange at 135 degrees (top left to bottom right). The tool gives you:

The first line is a plain colour, the average of your stops. A browser that can't draw gradients uses it and ignores the second line, which it doesn't understand. Everything modern uses the second line, which overrides the first.

Tips for gradients that look good

• Two or three colours that sit near each other on the colour wheel blend cleanly. Opposite colours, like red and green, often turn muddy grey in the middle. Add a middle stop to steer the blend.
• If text sits on top of the gradient, check the contrast at both ends, not only in the middle. White text that reads well on deep orange may vanish on pale yellow.
• Large, very subtle gradients can show visible bands on some screens. A slightly stronger change of colour usually hides them.
• To put a gradient over a photo, list it before the image: background: linear-gradient(...), url(photo.jpg);. A gradient from transparent to dark at the bottom makes caption text readable.
• Use background-image instead of background if you only want to change the gradient and keep other background settings.

The random button uses your browser's secure random number generator to pick two or three colours and an angle in steps of 15 degrees. Nothing is sent anywhere, and the CSS is yours to use in any project.