# CSS Gradient Generator

> Build linear, radial and conic CSS gradients and copy the code.

To create a CSS gradient, choose linear, radial or conic, set the start and end colours and pick a direction. The generated CSS is ready to paste, and adding intermediate stops produces a smoother ramp between distant hues.

**URL:** https://convertto.tech/t/gradient-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

- **Privacy:** Runs entirely in your browser — nothing is uploaded
- **Cost:** Free, unlimited, no sign-up

## How to use

1. Choose the gradient type.
2. Choose the direction.
3. Pick the start colour.
4. Pick the end colour.
5. Set the intermediate stops.
6. The result appears immediately — copy or download it.

## FAQ

### Why does my gradient look muddy in the middle?

Because CSS interpolates in sRGB by default, which passes through grey between complementary colours. Adding a midpoint stop in a more saturated hue fixes it, and newer browsers can interpolate in OKLCH which avoids it entirely.

## Related tools

- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [Glassmorphism CSS Generator](https://convertto.tech/t/glassmorphism-generator): Create frosted-glass CSS with backdrop blur, transparency and a subtle border.
- [CSS Shape Generator](https://convertto.tech/t/css-shape-generator): Generate triangles, arrows, stars and other shapes using pure CSS.
- [Gradient Text Generator](https://convertto.tech/t/gradient-text-generator): Fill text with a gradient, a metallic sheen or a chrome effect using background-clip.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [CSS Text Shadow Generator](https://convertto.tech/t/text-shadow-generator): Design text shadows, outlines and glow effects with a live preview.
- [Tailwind Colour Shade Generator](https://convertto.tech/t/tailwind-shade-generator): Generate a full 50–950 Tailwind colour scale from a single brand colour.