CSS Gradient Generator

What it does

The CSS gradient generator lets you design a gradient by eye and copy the finished CSS. Pick a linear, radial or conic gradient, add as many color stops as you like, drag their positions, set the angle or center point, and the preview updates instantly. You can also paste an existing linear-gradient(…), radial-gradient(…) or conic-gradient(…) to edit it visually. Everything runs in your browser.

How to use

1. Start from a preset or keep the sample gradient.
2. Choose the Type. Linear and conic gradients have an angle; radial and conic gradients have a center you can move with Center X and Center Y.
3. Edit the Color stops: change a color with the picker or type any CSS color, drag Position to move it, use + Add stop to insert one in the widest gap, and Reverse to flip the order.
4. Turn on Repeating to tile the gradient for stripes and rings.
5. Copy the code from the CSS card, optionally with a solid color fallback for very old browsers.

The Gradient CSS box at the bottom shows the gradient value and is editable: paste a gradient from your stylesheet or a design tool and the controls pick it up.

Example

.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Tips for good gradients

• Keep it subtle. Two neighboring hues (blue to violet, orange to pink) look smoother than opposite colors, which can turn muddy grey in the middle.
• Add a middle stop to control the blend. A third stop slightly lighter than its neighbors gives a soft highlight.
• Hard stops make shapes. Stops at the same position create sharp edges: stripes, flags, progress bars and pie charts all use this trick.
• Directions. to right equals 90deg and to bottom (the default) equals 180deg. Angles go clockwise from the top.
• Text on gradients must stay readable across the whole gradient. Check the lightest and darkest stops against your text color with a contrast checker.