# CSS Gradient Generator

> Build linear and radial CSS gradients visually. Pick colors, drag stops, copy the CSS.

URL: https://uttir.com/css-gradient-generator
Categories: color-tools, web-tools
Privacy: Gradient math runs locally. No images are uploaded.

## About

CSS gradients let you paint the background of any element with a smooth blend of two or more colors. They are vector (no image asset needed), they scale perfectly, and they are one of the highest-impact visual effects you can add to a page in a single line of CSS.

Pick a type (linear or radial), set the angle, add as many color stops as you like, and copy the resulting CSS. The live preview updates as you edit so you can dial in the look before you commit.

## How to use

1. **Pick a type** — Linear for directional blends, radial for circular glows.
2. **Set the angle** — For linear: 0deg is bottom-to-top, 90deg is left-to-right.
3. **Adjust stops** — Change colors and positions. Copy the CSS when ready.

## Examples

### Sunset horizontal

A classic left-to-right warm gradient.

Output:

```
linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%)
```

### Cool radial

A center-out blue glow.

Output:

```
radial-gradient(circle, #00c6ff 0%, #0072ff 100%)
```

## FAQ

### Linear or radial?

Linear gradients flow along a direction (top-to-bottom, left-to-right, or any angle). Radial gradients flow outward from a center point. Linear is more common for backgrounds; radial is great for spotlights, vignettes, and buttons.

### Why does my gradient look banded?

Most monitors can only display 8 bits per channel (16.7M colors), so smooth gradients can show subtle banding, especially in dark blues and grays. Adding a tiny amount of dither via CSS or PNG can help.

### What is the difference between linear and radial gradients?

Linear gradients flow in a straight line (top-to-bottom, left-to-right, or any angle). Radial gradients flow outward from a center point. Linear is for backgrounds and stripes; radial is for spotlights and depth effects.

## Related tools

- [Color Palette Generator](https://uttir.com/color-palette-generator) — Generate 5-color palettes from any base color using classic harmony schemes — analogous, complementary, triadic, and more.
- [Color Picker](https://uttir.com/color-picker) — Pick any color and copy it as HEX, RGB, or HSL.
- [HEX to RGB](https://uttir.com/hex-to-rgb) — Convert any HEX color code to its RGB and HSL equivalents.

---

For the full HTML page with the live tool, visit https://uttir.com/css-gradient-generator.
This file is the markdown rendering at https://uttir.com/css-gradient-generator.md. See https://uttir.com/llms.txt for a site-wide summary.