CSS Gradient Generator Guide: Linear, Radial and Conic Gradients

CSS Gradients Without the Guesswork

You want a smooth colour fade behind a hero section, but the CSS you copied produces a hard band instead. A CSS gradient generator lets you build linear, radial and conic gradients visually, then copy the finished code straight into your stylesheet. This guide covers how each gradient type works, what the syntax actually means, and how to avoid the rendering traps that make gradients look cheap.

What a CSS Gradient Actually Is

A gradient is a browser-generated image. You never ship a JPEG; you describe a transition between colours in CSS, and the browser paints it.

Gradients belong in the background or background-image property, not background-color. That single distinction trips up more beginners than any other part of the syntax, because background-color accepts one value and silently ignores your gradient.

Three functions cover nearly every case:

• linear-gradient() paints colours along a straight line
• radial-gradient() paints them outward from a central point
• conic-gradient() sweeps them around a circle, like a clock hand

Each one is defined by direction, colour stops, and optional interpolation hints. Get those three right and the rest is detail.

If you would rather adjust values with sliders than type colour codes by hand, a visual builder in a browser-based toolbox removes most of the trial and error.

How to Build a Gradient Step by Step

This numbered workflow applies to any of the three types. Start with the simplest version, then refine.

1. Set the function and direction. Write linear-gradient(to right, ...) or radial-gradient(circle, ...) so you know the shape before choosing colours.
2. Add two colour stops. Beginning and end. Two stops are enough to see whether the direction is correct.
3. Check contrast against your text. A gradient behind body copy needs enough darkness or lightness across its whole length, not just at one end.
4. Insert a middle stop if the transition looks muddy. A third stop at 50% gives you control over where the blend pivots.
5. Add hard stops for sharp edges. Repeating the same position, such as red 40%, blue 40%, produces an instant colour break with no blend.
6. Test with long content. Scroll the page. Gradients that look fine in a short viewport can band or stretch awkwardly when the container grows.
7. Copy the declaration into your stylesheet and set a solid background-color fallback on the same rule.

Step seven matters more than it looks. If the gradient fails to parse, the fallback keeps your text readable instead of dropping it onto white.

Linear Gradients: Direction and Angle

The linear gradient is the workhorse. It runs along a straight line, and you control that line two ways.

Keyword directions are the readable option: to right, to bottom left, to top. Angles are the precise option: 45deg, 0.25turn, 1.5rad. In angle syntax, 0deg points up and values increase clockwise, so 90deg points right.

background: linear-gradient(135deg, #1e3a8a, #38bdf8);

That declaration fades from a deep navy to a light blue on a diagonal. The diagonal direction is common for hero panels because it reads as more dynamic than a flat vertical fade.

When to use a linear gradient

Use it for banners, buttons, section dividers, progress bars and text fills. It is also the right choice for subtle page backgrounds, where a very low-contrast vertical fade adds depth without competing with content.

Radial Gradients: Shape, Size and Position

A radial gradient radiates from a centre point. You control the shape, the size and the origin.

• Shape: circle or ellipse. Ellipse is the default and adapts to the container's proportions.
• Size: closest-side, farthest-corner, or an explicit radius like 120px. farthest-corner is the default and usually the safest.
• Position: at center, at top left, at 30% 70%.

background: radial-gradient(circle at 30% 20%, #fef3c7, #f59e0b);

This creates a warm glow offset toward the upper left. Offsetting the origin is what separates a deliberate spotlight effect from a generic vignette.

Where radial gradients earn their place

Radial gradients work well for spotlight effects, soft glows behind icons, and depth on cards. They are harder to control than linear gradients because the falloff is not linear, so a two-stop radial fade can look like it darkens too quickly near the edge. Adding a midpoint stop usually fixes it.

Be honest about the limits here. A CSS radial gradient is not a substitute for a real blurred shadow or a raster glow. If you need soft, organic light, a gradient will look flat by comparison.

Conic Gradients: Sweeps, Charts and Colour Wheels

A conic gradient rotates colour around a centre point. You specify an angle for the start position, then place colour stops by percentage of the full turn.

background: conic-gradient(from 90deg, #ef4444, #eab308, #22c55e, #ef4444);

That produces a full colour wheel starting from the right. Conic gradients are the newest of the three and the least supported in older browsers, so check your target range before relying on one for critical UI.

Practical uses for conic gradients

• Pie and donut charts, built with hard stops rather than blends
• Loading spinners and progress rings
• Decorative borders and badge backgrounds
• Colour pickers and hue wheels

The chart use case is the most valuable. A conic gradient with hard stops at 0%, 25%, 50% and 75% renders a four-segment pie chart with no image assets and no JavaScript.

Does a CSS Gradient Generator Work Offline?

Yes, in most cases. A generator that runs entirely in the browser needs no network connection once the page has loaded, and your colour values never leave your device.

That matters if you are working with brand palettes or unreleased designs. Because the computation happens locally, there is no upload step and no account. The trade-off is that you manage your own saved snippets, since nothing is stored on a server for you.

Colour Stops, Interpolation and Banding

Colour stops are the positions where a colour is fully itself. Between stops, the browser interpolates.

Two things cause most visual problems:

Banding. Visible stripes appear when a gradient spans a large area with very low contrast. Adding a subtle noise texture or narrowing the colour range reduces it. This is a rendering limitation, not a syntax error.

Premature grey. Blending between two distant hues in sRGB space can pass through a desaturated middle. Adding a midpoint stop in the hue you want keeps the transition clean.

You can also control the blend point with a percentage hint placed between two stops, such as red, 30%, blue, which shifts the midpoint toward the first colour.

Transparency, Repeating Gradients and Modern Syntax

Transparency works with any colour format that includes an alpha channel, such as rgba() or an eight-digit hex value. Fading a colour to transparent is the standard technique for image overlays, but use transparent carefully: in some colour spaces it resolves to a transparent black and darkens the fade. Fading to the same hue at zero alpha avoids that.

Repeating gradients use the same stop syntax with a defined length, letting you build stripes and patterns without an image file.

Modern CSS also supports interpolation hints and explicit colour space selection in newer syntax. Browser support varies, so treat these as progressive enhancement rather than a baseline.

Common Mistakes to Avoid

• Using background-color for a gradient. It will not render. Use background or background-image.
• Forgetting the fallback. Always pair the gradient with a solid colour.
• Too many stops. Three or four is usually enough. More stops rarely improve the result and make the code harder to maintain.
• Ignoring text contrast. Check the gradient at its lightest point, not its average.
• Assuming identical rendering everywhere. Colour management differs between browsers and displays.

Frequently Asked Questions

Can I use a gradient on text?

Yes. Apply the gradient as a background, then use background-clip: text with a transparent text colour. Keep a solid colour fallback, because the technique depends on support for both properties.

Do gradients affect page performance?

A simple gradient is cheap to render. Very large gradients with many stops, or several animated gradients on one page, can cost more. Animate transform or opacity rather than the gradient itself where possible.

Why does my gradient look different on mobile?

Container size and aspect ratio change the shape a radial gradient resolves to, and display colour profiles shift how hues appear. Test on a real device rather than trusting a desktop preview.

Can I animate a gradient?

You can transition between two gradient declarations in browsers that support interpolating them, but support is inconsistent. Animating a background position over an oversized gradient is the more reliable technique.

Are gradients accessible?

They can be, but they need checking. Ensure text over a gradient meets contrast requirements across the entire area it covers, and never rely on colour alone to convey meaning.

Where Gradients Fit in Your Workflow

Gradients are one of the few visual effects you can add without shipping an image, which keeps pages lighter and easier to theme. The three functions cover distinct jobs: linear for direction, radial for focus, conic for rotation.

A CSS gradient generator shortens the loop between idea and working code, but the syntax still has to be correct. Build the gradient visually, read the declaration it produces, and you will start writing these by hand. For related browser-based utilities, browse the full tool collection and keep the ones that match how you actually work.