CSS Gradient Generator

Three Gradient Types, One Tool

CSS gradients come in three flavors. **Linear** blends colors along a straight axis — set an angle from 0° (bottom-to-top) through 90° (left-to-right) to 360°. **Radial** emanates from a center point in an ellipse or circle — pick the shape and center coordinates to steer how the gradient radiates. **Conic** sweeps around a center point like a clock face starting from a chosen angle — ideal for pie charts, sunbursts, and CSS-only loading spinners. The tool renders the exact CSS output as its preview background, so what you see is what you'll ship.

Color Stops Are The Grammar Of Gradients

A color stop pins a specific color to a specific position along the gradient — `#ff0000 0%` means start red, `#0000ff 100%` means end blue. Two stops give a smooth blend. Add more stops for multi-color ramps. Move stops closer together to sharpen the transition (`red 40%, blue 60%` creates a visible band at 50%). Move them far apart for wide blends. The tool lets you drag the position slider on any stop, reorder stops freely, and add up to 10 — enough for any realistic design without performance cost.

Practical Angles And Positions

For linear gradients, 90° (left-to-right) and 180° (top-to-bottom) are the most common in web design. 135° (top-left to bottom-right) produces the classic 'soft hero' look. For radial, center at 50% 50% (the default) for a balanced ellipse; shift to 0% 0% for a light-leak-from-top-left effect. For conic, centering at 50% 50% with from 0° gives a full wheel; offsetting the center toward one edge creates a partial sweep useful for abstract backgrounds.

Gradient Performance And Color-Space Notes

CSS gradients are painted by the GPU on every modern browser and cost essentially nothing at runtime — animating them is fine. Note that default gradients interpolate in sRGB, which can produce a muddy middle when blending complementary colors (red to green goes through brown). Modern browsers support `in oklch` or `in lab` syntax for perceptually-uniform interpolation, but support is uneven; for maximum compatibility, the tool emits standard sRGB syntax.

100% Local, Copy-Ready Output

The gradient builder runs entirely in your browser — no tracking of the colors you pick, no server round-trips. Copy the `background: linear-gradient(...)` output straight into your CSS, Tailwind arbitrary value (`bg-[linear-gradient(...)]`), or inline style attribute. Works in React, Vue, Svelte, plain HTML, anywhere CSS does.

What's the difference between linear, radial, and conic?

Linear gradients blend colors along a straight line at a chosen angle. Radial gradients fan out from a center point in an ellipse or circle. Conic gradients sweep around a center point like a pie chart — perfect for rainbow wheels and sunburst effects.

How do color stops work?

Each stop is a color plus a position from 0% to 100%. Two stops at 0% and 100% give a smooth blend; adding a third at 50% gives a three-color ramp. Move stops closer together to sharpen the transition between them.

Can I use this with Tailwind?

Yes — copy the generated `background: linear-gradient(...);` directly into a Tailwind `bg-[...]` arbitrary value, or paste it into an inline style. Works in any framework.

Is the preview what I'll see on my site?

Yes. The preview card applies the exact CSS output as its background. What you see is what you'll render — modulo any color-space differences, which are consistent across modern browsers.