What is the difference between a linear and a radial gradient?

A linear gradient blends colors in a straight line along an angle you set (for example 90deg goes left to right), while a radial gradient blends outward from a center point in a circle. Use linear for backgrounds and buttons, and radial for spotlights, glows, or soft vignettes.

How do color stops and positions work?

Each stop is a color plus a position from 0% to 100%. The browser fills the space between stops by smoothly interpolating the colors. Adding more stops lets you hold or shift colors at specific points, creating multi-band gradients instead of a simple two-color fade.

How do I create a variation with a held middle color?

Add a third color stop in addition to your two anchor stops at 0% and 100%, then drag its position slider to the percentage where you want the color to sit. The browser will interpolate into that stop from one side and out of it on the other side, producing a held mid-band instead of a smooth two-color fade.

Can I reorder the stops without breaking the CSS?

Yes. The generator re-sorts every stop by position automatically and clamps each value into the 0–100% range, so the CSS it prints stays syntactically valid no matter what order you drag the stops into while working.

Is the generated CSS supported in all browsers?

Yes. linear-gradient() and radial-gradient() are standard CSS and work in every current browser without prefixes, images, or libraries. The output is a single background value you can paste directly into your stylesheet.

Gradient Generator Shades and Variations in CSS

A gradient is defined by color stops — each one a color paired with a position from 0% to 100% — and the browser interpolates the pixels between them. "Shades" in this context are the individual colors you pick: a near-black navy, a warm amber, a vivid magenta. "Variations" are the ways you arrange those shades across the canvas — the angle you choose on a linear gradient, the number of stops you add, and the position of every stop along the 0–100% axis. Two stops give a clean fade; a third or fourth stop turns that fade into a multi-band blend with held colors, sharp midpoints, or color that pushes to one edge and pulls back. The simplest way to explore all of that without writing CSS by hand is to use the Color Gradient Generator, a visual tool that lets you pick a gradient type, drag stops and their positions, tweak the angle, and watch the result update live. When the design looks right, one click copies a ready-to-paste CSS background declaration straight to your clipboard.

What shades and variations mean in a CSS gradient

Every CSS gradient value is just a list of color stops inside a linear-gradient(...) or radial-gradient(...) function. Each stop has two parts: a color and a position expressed as a percentage from 0% to 100%. The browser walks from the first stop to the last and smoothly blends every pixel in between. When you only have two stops at 0% and 100%, the result is a simple two-shade fade. The moment you add a third stop at, say, 40% with its own color, that color is held at 40% and the interpolation splits into two segments — and that is the simplest "variation" on top of the basic shade mix.

Variations also come from the gradient type and the geometry you set on it:

Linear gradient angle: 0deg points the blend toward the top of the box, 90deg pushes it to the right, and 180deg drops it to the bottom. Changing the angle by 30 or 45 degrees is one of the most common shade variations.
Stop position drag: moving a stop from 50% to 20% compresses the blend before that stop and stretches it after, which is how you get a "color burst" that feels weighted to one side.
Stop color edits: swapping one of the colors for a near-monochrome tone creates a tonal shade variation; swapping in a complementary or contrasting color creates a high-energy variation.
Radial shape and origin: on a radial gradient, the same two or three colors can radiate from a circle and produce a very different variation than a linear sweep across the same box.

Because the generator clamps every stop to the 0–100% range and re-sorts them by position automatically, the CSS it prints stays syntactically correct no matter how you reorder them while designing.

Build gradient shades and variations step by step

Pick a gradient type. Choose Linear for a directional fade you can angle, or Radial for a center-out blend suitable for spotlights, glows, and soft vignettes. Your type choice is the first "variation" you set.
Set each color and drag its position. Edit the color of every stop, then drag the slider to move the stop along the 0–100% axis. Add a third or fourth stop to hold a color at a specific point, or remove a stop to simplify the blend back down. On a linear gradient, also adjust the angle slider — 0deg points to the top, 90deg runs to the right, and any value in between produces a diagonal blend.
Preview live and copy the CSS. Watch the inline preview update as you work. When it looks right, click Copy CSS to grab the full background: linear-gradient(...) or background: radial-gradient(...) declaration and paste it straight into your stylesheet.

If you want to explore fresh combinations without picking by hand, the Randomize action generates a new mix of colors, positions, and angle for you to start from. Everything runs locally in your browser, so nothing you design is uploaded to a server.

Linear vs radial: which carries more variation

Both gradient types support the same shade-based variations — multi-stop blends, mid-color holds, sharp transitions, and near-monochrome palettes — so the choice between them is really about direction. Use linear when you want the gradient to read as a sweep across the surface, and radial when you want it to read as a centered glow or a soft falloff.

Dimension	Linear gradient	Radial gradient
Direction control	Adjustable angle	From a center point outward
Best for	Backgrounds, buttons, cards, dividers	Spotlights, glows, soft vignettes
Variation knob	Angle slider plus stop positions	Shape (circle) plus stop positions

Effect of holding a middle stop	Creates a color plateau across the band	Creates a ring or halo between two colors

Where gradient shades and variations show up in real interfaces

Multi-stop linear and radial gradients are everywhere in modern interface design, and most of them are variations of the same handful of patterns:

Hero and section backgrounds: a two-stop linear fade running top to bottom gives a clean, calm background; a three-stop blend with a held accent mid-band gives a more branded, energetic backdrop.
Button and card fills: a two-stop linear gradient at a 135° angle is the canonical "raised button" look; switching the second stop to a darker shade produces a pressed or hover state.
Badges and pills: a radial gradient on a small surface reads as a soft highlight, which makes a flat pill shape look three-dimensional.
Progress bars: a horizontal linear gradient with a lighter leading edge communicates motion and completion.
Hover states: swapping one shade in the gradient on :hover is one of the cheapest visual feedback effects you can ship.
Image overlays: a top-to-bottom or bottom-to-top linear gradient (often from transparent to a near-black shade) keeps white text readable over photographic content.
Decorative dividers: a low-contrast two-stop linear gradient is a common substitute for a hard rule.

Why generate CSS instead of exporting an image

The output of a gradient generator is plain CSS — a single background value — not a rasterized PNG or JPEG. That choice matters for four reasons:

Crisp at any size. The browser interpolates the gradient on the fly, which means it scales cleanly to any element size or resolution. It never pixelates on a 2x or 3x screen.
Zero network requests. One CSS property, no image file, no separate asset to host or cache.
No vendor prefixes or libraries. linear-gradient() and radial-gradient() are standard CSS and work in every current browser without prefixes.
Editable in place. Because the gradient lives in your stylesheet, you can change a shade or angle in one line of CSS without re-exporting an image, re-uploading it, and clearing the cache.

A quick sanity check on your shade and variation choices

Once you have drafted a gradient, three quick checks catch most of the common issues before you ship the CSS:

First and last stop coverage. Make sure there is a stop at or near 0% and another at or near 100%. If both ends land in the middle, the browser extends the outer stop's color flat to the edge and you end up with two solid bands plus a fade in between — usually not what you wanted.
Two stops at the same position. Dragging two stops to identical positions produces a hard color break rather than a smooth blend, which is occasionally useful for a stripe-like accent but easy to do by accident.
Mid-stop placement. A held middle color works best when its position sits clearly off-center (say 35% or 65%) rather than at exactly 50%, so the blend on either side has visibly different lengths.

Inside the generator, every stop position is clamped to the 0–100% range and the list is automatically sorted by position, so the CSS you copy out is always syntactically valid even if you drag the stops into a messy order while designing.

Putting it together

The cleanest workflow for gradient shades and variations is to start with a type (linear or radial), lock in two anchor shades at 0% and 100%, then add a third or fourth stop only when you have a specific visual goal — a held accent at 40%, a near-monochrome tail at 85%, a complementary pop at 25%. Each stop you add is one more variation knob, and each stop you remove is a simplification. If you want to see how the same two colors read as a radial versus a linear blend, or how shifting a stop from 50% to 30% changes the weight of the color, the live preview in the generator updates on every drag. When the visual matches what you had in mind, copy the CSS, paste it into your stylesheet, and move on.

For a deeper look at how color stops translate into the final CSS value, see CSS Gradient Colors: From Stops to Production-Ready Code.

If you're weighing options, Hex to RGB on Windows: Convert CSS Hex in Your Browser covers this in detail.