CSS Gradient Generator

The CSS Gradient Generator is a free online visual tool for creating linear, radial, and conic CSS gradients. Build gorgeous color transitions with a drag-and-drop color stop editor, fine-tune the gradient angle and position, preview the result in real-time, and copy the exact CSS code ready to paste into your stylesheet. Supports unlimited color stops, custom stop positions (percentages or pixels), opacity per stop, and all three modern gradient functions: linear-gradient(), radial-gradient(), and conic-gradient() (the newest, added in 2020). Plus gradient text, gradient borders, and animated gradients with @keyframes.

Gradients are everywhere in modern design: hero section backgrounds, button hover states, card accents, loading shimmer effects, dividers, CTA overlays, and increasingly in branding (Instagram's iconic gradient, Stripe's purple-to-red, etc.). Hand-writing gradient CSS is error-prone — getting the angles, stops, and color mixing right takes experimentation. This tool makes it visual and instant. All generation is client-side, so you can iterate rapidly without network delays.

CSS supports three types of gradients defined in the CSS Images Module Level 3 and 4 specs:

Linear gradient:

```css
background: linear-gradient(direction, color-stop1, color-stop2, ...);

/* Examples: */
background: linear-gradient(to right, #ff0000, #0000ff);
background: linear-gradient(45deg, red, yellow 50%, blue);
background: linear-gradient(to bottom right, #ff0000 0%, #ffa500 50%, #ffff00 100%);
```

- Direction: to top, to right, to bottom, to left, to top right, etc., or an angle (45deg, 90deg).
- Color stops: each is a color + optional position (% or length). Without position, stops are evenly distributed.
- Supports alpha (transparency) in color values.

Radial gradient:

```css
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

/* Examples: */
background: radial-gradient(circle, red, blue);
background: radial-gradient(circle at top, red 0%, blue 50%, green 100%);
background: radial-gradient(ellipse 200px 100px at center, red, transparent);
```

- Shape: circle or ellipse (default).
- Size: closest-side, closest-corner, farthest-side, farthest-corner (default), or explicit dimensions.
- Position: at top, at 30% 50%, etc. (defaults to center).

Conic gradient:

```css
background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

/* Examples: */
background: conic-gradient(red, yellow, green, blue, red);
background: conic-gradient(from 45deg at 50% 50%, #ff0000 0deg, #00ff00 120deg, #0000ff 240deg, #ff0000 360deg);
```

- Rotates colors around a center point, like a pie chart.
- Supported in all modern browsers since ~2020.
- Color stops use angles (deg, turn, rad) instead of percentages.

Multiple backgrounds:

CSS allows layered gradients for complex effects:

``css
background:
linear-gradient(135deg, rgba(0,0,0,0.5), transparent),
radial-gradient(circle at top right, red, transparent),
url('photo.jpg');
``

Each layer stacks from top (first) to bottom (last). Use transparent or rgba() for transparency between layers.

Text gradients:

``css
.gradient-text {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
``

Animated gradients:

``css
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.loading {
background: linear-gradient(90deg, transparent 0%, #ddd 50%, transparent 100%);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
``

Color interpolation:

- Default gradients interpolate in sRGB — often produces muddy mid-tones (e.g., blue to yellow goes through gray).
- CSS Color 4 adds in oklch and in lab interpolation methods:
``css
background: linear-gradient(in oklch to right, blue, yellow);
``
Produces cleaner, more saturated mid-tones. Supported in modern browsers (2023+).

CSS gradient vs image gradient: CSS gradients are resolution-independent, tiny in file size (part of CSS), and instantly customizable. Image gradients (PNG/JPG) support more complex patterns but are fixed. Prefer CSS gradients for 95% of cases.

Linear vs radial vs conic: Linear for directional fades (top-to-bottom, left-to-right, diagonal). Radial for spotlight/glow effects emanating from a point. Conic for pie-chart/rainbow effects that sweep around a center (newest, most unique). Each has its place.

CSS gradient vs SVG gradient: SVG gradients offer more control (mesh gradients, custom color spaces, advanced gradient transforms) and are great for logos/illustrations. CSS gradients are simpler for web backgrounds. For most web use, CSS is fine.

Gradient vs solid color: Gradients add depth and visual interest. Solid colors are simpler and faster to process. For brand consistency, pick one approach and stick with it — don't mix heavy gradients and flat colors inconsistently.

sRGB interpolation vs OKLCH interpolation: Default sRGB interpolation produces muddy mid-tones for saturated colors. in oklch produces perceptually uniform, vibrant gradients. Use in oklch or in lab for gradient quality, especially with saturated colors.

Mesh gradients vs linear/radial: Mesh gradients (in design tools like Figma, Sketch) blend multiple points with individual colors. Not yet in CSS. Workaround: layer multiple radial gradients for a mesh-like effect.