CSS gradient generator

Pick the type, move the sliders, choose colours, and copy the line of CSS. The picture updates as you change anything.

What each control does

• Type. A linear gradient fades along a straight line, a radial gradient fades outwards from a point, and a conic gradient sweeps around a point like the hands of a clock.
• Angle. For a linear gradient, 0 degrees points up, 90 degrees points to the right, 180 degrees points down and 270 degrees points to the left. The default of 135 degrees runs from the top-left corner towards the bottom-right. For a conic gradient the angle says where the sweep starts: 0 is straight up, and it turns clockwise.
• Shape and centre. A radial gradient is a circle or an ellipse. The centre is given in percentages of the box, so 50% 50% is the middle and 0% 0% is the top-left corner.
• Colours and positions. Each colour has a position from 0% to 100% along the gradient line. Two colours at the same position make a hard edge instead of a smooth blend. The third colour is optional.

How to use the code

Copy the line and put it inside a rule for the element you want to colour, for example .hero { background: ...; }. The code is a normal background declaration, so it replaces a background colour or picture on that element. Add a plain background-color just before it if you want a colour to show where the gradient cannot be drawn.

Text on top of a gradient must stay readable at every point of the gradient, not only at one end. Check the lightest and the darkest area against your text colour.

Common mistakes

1. Writing colour names the page does not know. The tool uses hex colours such as #ff7e5f, which every browser reads.
2. Expecting 0deg to point right. In CSS it points up, which is different from the angles used in maths.
3. Forgetting that a gradient is an image, not a colour. It belongs in background or background-image, not in background-color or color.
4. Using it as text colour. To colour text with a gradient you need background-clip: text and a transparent text colour; the guide on gradients shows the lines.

This is an independent site. It is not connected with the W3C, MDN, Google, Apple, Mozilla or Microsoft. Browser and product names belong to their owners.