CSS Gradient Generator

Create a gradient in a minute

1. Pick a type: linear for backgrounds and buttons, radial for glows and spotlights, conic for dials and colour wheels.
2. Start from one of the presets or press Random until something catches your eye.
3. Adjust the stops. Each stop has a colour, an alpha value and a position from 0 to 100. Add as many as you like; the list reorders itself by position.
4. Copy the CSS, or download a 1920x1080 PNG for slides and wallpapers.

Controls explained

• Angle (linear): 0deg points up, 90deg points right, 180deg points down. The direction buttons set the common eight values.
• Shape and extent (radial): circle or ellipse, and how far the gradient reaches: to the closest side, the farthest side, or a corner. Position moves the centre.
• From angle (conic): rotates where the sweep begins. Repeat the first colour as the last stop for a seamless wheel.
• Repeating: tiles the section between your first and last stop, which is how stripes and rings are made. Use stops like 0%, 10%, 10%, 20% for hard-edged bands.

Tips for better-looking gradients

• Keep neighbouring hues close. Gradients between far-apart colours can pass through a muddy grey; add a middle stop to steer them.
• Place two stops at the same position to create a hard edge instead of a blend.
• Use a small amount of alpha on the last stop to fade a gradient into the page background.
• For text over a gradient, check contrast against both ends of the gradient, not only the middle.

Using the output

Paste the background line into your stylesheet. The background-image version is useful when you also set background-color as a fallback, or layer several backgrounds with commas. The Tailwind class goes straight into your markup.