# CSS Gradient Generator

> Build linear and radial gradients visually. Pick stops, angle, and direction; copy as CSS or Tailwind arbitrary value.

- URL: https://generate.now/gradient
- Category: color
- Price: free, no account required
- AI-powered: no
- Last updated: 2026-08-27

## What it does

A visual gradient builder for CSS. Drag stops, set angle, pick linear or radial, and copy the result as a CSS background-image declaration or a Tailwind arbitrary value. Live preview reflects every change.

## When to use it

- Build a hero background gradient that doesn't look like every other SaaS site
- Translate a Figma gradient to clean CSS
- Prototype a button or card surface with a subtle gradient sheen
- Get the Tailwind class for an existing CSS gradient

## Examples

### linear, 135°, #ff7a59 → #6a3093

```
linear-gradient(135deg, #ff7a59 0%, #6a3093 100%)
```

A standard two-stop diagonal sweep.

### radial, centered, three stops

```
radial-gradient(circle at 50% 50%, #f6d365 0%, #fda085 50%, #f76b1c 100%)
```

Sunburst-style radial gradient with three color stops.

### linear, 90°, three stops with a midpoint hint

```
linear-gradient(90deg, #0ea5e9 0%, #6366f1 45%, #ec4899 100%)
```

The middle stop sits at 45% rather than 50% so the blue holds slightly longer.

### vertical scrim for text over an image

```
linear-gradient(to bottom, rgba(13, 2, 33, 0) 0%, rgba(13, 2, 33, 0.9) 100%)
```

Fades from fully transparent to near-opaque using one color at two alpha values.

## Frequently asked questions

### Can I add more than two color stops?

Yes — add as many stops as you need. Each stop has a position (0–100%) and a color. Drag the handles in the preview or edit the values directly.

### What's the difference between linear and radial?

Linear gradients travel along a single axis you specify with an angle. Radial gradients emanate from a point in concentric rings. Conic gradients (around a point) are a separate type.

### Why does my gradient look banded?

Banding usually comes from low contrast between adjacent stops on a wide gradient. Add intermediate stops, increase the color distance, or switch to OKLCH interpolation for a smoother fall-off.

### Does the Tailwind output use the gradient utilities?

For two-stop gradients it uses Tailwind's bg-gradient utilities. For three or more stops or unusual angles, it emits an arbitrary value (bg-[linear-gradient(...)]) so you don't lose fidelity.

### How do I fade a gradient to transparent without it going grey?

Fade to a zero-alpha version of the same color rather than to the transparent keyword. In most engines transparent resolves to rgba(0, 0, 0, 0), so interpolating toward it drags the midpoint through black. Use rgba(255, 122, 89, 0) — the same RGB with alpha 0 — and the fade stays clean.

### Can I animate a CSS gradient?

Not directly. background-image isn't an animatable property, so browsers jump between gradients instead of interpolating. The three workarounds are animating background-position across an oversized gradient, cross-fading two stacked layers with opacity, or registering a custom property with @property and animating that value.

## References

- [linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) — MDN Web Docs. Syntax reference for gradient lines, color stops, and interpolation hints.
- [CSS Images Module Level 3](https://www.w3.org/TR/css-images-3/) — W3C. The specification that defines gradient rendering and color-stop placement.

## Related tools

- [Color Palette Generator](https://generate.now/palette): Type a vibe — 'desert at dusk', 'cyberpunk lab' — and get a 5-color palette with hex, RGB, HSL, and OKLCH for every swatch.
- [CSS Box Shadow Generator](https://generate.now/box-shadow): Build CSS shadows with sliders for offset, blur, spread, color, and opacity. Live preview, multi-shadow stacking, copy as CSS or Tailwind.
- [CSS Animation Generator](https://generate.now/animation): Build CSS @keyframes animations visually. Pick a preset or design your own — duration, easing, iteration. Live preview, CSS + Tailwind output.