Gradient Generator

**CSS Gradient Generator — Create Stunning Gradients Visually**

Gradients are one of the most powerful CSS tools for creating beautiful backgrounds, buttons, and design accents — without any images. Our visual CSS Gradient Generator lets you design gradients interactively and copies the CSS code instantly.

**Gradient Types**

**Linear Gradient**
Transitions from one colour to another along a straight line.
CSS: `background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);`

**Radial Gradient**
Transitions from a central point outward in a circular/elliptical pattern.
CSS: `background: radial-gradient(circle, #f093fb 0%, #f5576c 100%);`

**Conic Gradient**
Transitions around a center point like clock hands — creates pie chart effects.
CSS: `background: conic-gradient(from 0deg, red, yellow, green, blue, red);`

**Features**

- **Visual colour stops** — Drag stops to adjust position
- **Multiple stops** — Add any number of colour stops
- **Angle control** — Precise degree input for linear gradients
- **Opacity support** — Transparent gradients
- **Preset gallery** — 30+ beautiful pre-made gradients
- **Cross-browser CSS** — Includes -webkit- prefixes for maximum compatibility
- **Copy as CSS** — One-click copy of the CSS property
- **Copy as Tailwind** — For Tailwind CSS projects

**Popular Gradient Palettes**

*Twilight* — `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`
*Peachy* — `linear-gradient(135deg, #f093fb 0%, #f5576c 100%)`
*Ocean* — `linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)`
*Forest* — `linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)`

**Gradient in Design Systems**

Gradients add depth and visual interest but should be used thoughtfully. Avoid overly saturated gradients for backgrounds behind text — they reduce readability. Subtle, low-contrast gradients work best for large background areas.