CSS Gradient Generator

What it does

The Gradient Generator builds linear and radial CSS gradients visually, with up to five independently positioned colour stops, and outputs the exact background value you can paste into your stylesheet. The preview updates as you move stops or change the angle, so you are tuning a real gradient rather than imagining what the CSS will produce. The output is plain CSS — no vendor prefixes, no framework wrappers, no extra weight.

Common situations

You’re designing a hero section for a marketing landing page and the brief says “use the brand gradient”. The brand has one defined; you need to pick the angle and stop positions that read as deliberate rather than default.

You’re building a CSS-only chart or visualisation where the bars need a subtle gradient fill to differentiate categories. Pure colour fills look flat against a modern interface; gradients with very near hues add depth without competing for attention.

You’re producing a gradient text effect for a hero heading using background-clip: text. Getting the gradient to look right at large display sizes versus small mobile sizes takes iteration — the generator is the fastest place to do that iteration.

You’re rebuilding an old marketing site whose hero gradient was hard-coded into a CSS file ten years ago, with vendor prefixes for browsers that no longer exist. Modernising to a single clean CSS line saves bytes and makes the gradient easier to tweak.

You’re building section dividers — broad, soft gradients used as background bands between content sections. Subtle two-stop gradients with very near hues create visual rhythm without reading as “decorative”.

What you need to know

A CSS gradient is a function call that produces an image. linear-gradient takes an angle and a list of colour-stop pairs (a colour and a percentage along the gradient). radial-gradient takes a shape (circle or ellipse) and a position, then the same list of stops. The browser interpolates between adjacent stops in RGB space, which produces the characteristic “muddy middle” you sometimes see when crossing complementary hues — a known limitation of CSS gradient interpolation that no tool can fix without compositing multiple gradients on top of one another.

Stop positioning is the part most people get wrong by hand. The default — two stops at 0% and 100% — gives a smooth fade. Asymmetric positions (#a 0%, #b 30%, #c 100%) compress the transition between the first two colours and stretch the second, which is how you get gradients that feel weighted rather than centred. Multiple stops at the same position create hard stripes, which is occasionally exactly what you want for graphic-design-style backgrounds.

Angles in linear-gradient work clockwise from the top: 0deg runs upward (bottom to top), 90deg runs left-to-right, 180deg runs top-to-bottom, 270deg runs right-to-left. The popular 135deg runs top-left to bottom-right and tracks natural reading flow on left-to-right languages.

Modern CSS also supports conic gradients (rotating around a centre point) and the new color-interpolation-method syntax for forcing OKLCH, HSL, or other interpolation spaces — linear-gradient(in oklch, red, blue) produces a much more uniform transition than the default RGB. Both are still gaining adoption; for production work, RGB linear gradients remain the safest choice. Mesh gradients — multi-direction interpolation — are not yet in CSS and require SVG or WebGL.

For SEO crawler visibility, gradients render as plain text in your stylesheet, but the visual outcome only matters to human users. Search engines do not penalise heavy gradient use; they just do not credit it either.

Frequently asked questions

How do I make a CSS gradient go diagonal?

Use a linear gradient with a 45° or 135° angle. linear-gradient(135deg, #a 0%, #b 100%) runs from top-left to bottom-right. Adjust the angle in 1° increments to fine-tune.

Can I animate CSS gradients?

Not directly — you cannot transition between two gradients smoothly because they are technically images. Workarounds include animating background-position on a larger gradient, using two stacked gradients with one fading via opacity, or animating individual stop colours via custom properties.

What’s the difference between linear-gradient and radial-gradient?

Linear runs along an angle; radial radiates outward from a centre point. Linear is more common for backgrounds; radial works for highlights, focal effects, and circular fades. They share the same colour-stop syntax.

How many colour stops can a gradient have?

CSS imposes no limit. The tool caps at five because beyond that gradients tend to look chaotic; production work rarely exceeds three stops. Hard-edged graphic effects sometimes use ten or more.

Why does my gradient look muddy in the middle?

CSS interpolates between stops in RGB by default. Crossing complementary hues (red to green, blue to orange) passes through grey, which reads as “muddy”. Add an intermediate stop at the midpoint with the colour you actually want there, or use linear-gradient(in oklch, ...) in modern browsers for cleaner perceptual interpolation.

Are gradient backgrounds bad for performance?

Generally no — the browser renders them once on paint and caches them. Animating gradients (changing colours every frame) does cost performance. Static gradients are essentially free.

How do I make gradient text in CSS?

Apply the gradient as background, then background-clip: text and color: transparent. The text takes on the gradient. Works on every modern browser; older browsers fall back to whatever colour you set as the regular text colour.

Does CSS support transparency in gradients?

Yes — any stop colour can have alpha. linear-gradient(transparent, black) fades from transparent to opaque black, which is the standard recipe for image overlay vignettes.

Should I use gradients in dark mode?

Yes, but tune them differently. Gradients designed for light backgrounds usually need higher contrast or different stops to read on dark. Define separate gradient values for each theme rather than reusing the light-mode version.

Common problems

Problem: The gradient looks fine in Chrome but banded on Safari.

Subtle gradients (two near-identical colours over a large area) reveal banding more on some displays than others. Increase the colour difference between stops, or add a faint noise overlay (background-image with a noise PNG at low opacity). The banding is a display-quantisation issue, not a CSS bug.

Problem: Gradient text disappears on iOS Safari.

iOS Safari historically had issues with background-clip: text on certain font weights and sizes. Use -webkit-background-clip: text as well as background-clip: text, and test specifically on iOS — the fallback behaviour (transparent text with no fill) is jarring.

Problem: The gradient angle behaves opposite to what I expect.

CSS gradient angles are clockwise from straight up — 0deg is upward, not rightward. Many tools and design files use 0° as horizontal-right, which is the opposite convention. Check whether your source angle was specified in CSS or design-tool conventions.

Problem: Gradient performance is slow when the element is animated.

Repainting a gradient every frame is expensive. If you are animating the element (translate, rotate, scale), use transform rather than properties that trigger paint, and ensure will-change: transform rather than will-change: background. The gradient itself should not animate — only the element it sits on.

Quick guides

Tailwind CSS v4: Use the bg-linear-to-{direction} utilities with from-, via-, and to- colour stops. Custom angles use the bg-linear-[135deg] arbitrary value form.

Vanilla CSS custom properties: Define gradient values as variables — --gradient-hero: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); — and apply via background: var(--gradient-hero). Theme switching becomes one variable swap.

styled-components / Emotion: Pass colour values as props and interpolate. background: linear-gradient(${props => props.angle}deg, ${props => props.from}, ${props => props.to}); lets components specify their own gradients without hard-coding values.

Tips

• 135° (top-left to bottom-right) is the most common landing-page angle for a reason: it tracks the natural reading flow on left-to-right languages. Try 45° for the inverse “rising” feel.
• Two stops with very close hues (the same hue, ±5 lightness in HSL) produce subtle texture without the result reading as “a gradient” at all.
• For radial gradients, circle at center is the default cliché. Move the centre off-axis (at 30% 30%) for a gradient that feels intentional rather than default.
• Hard stops (two adjacent stops at the same percentage) make graphic blocks of solid colour with sharp dividers. Useful for retro-style sections and CSS-only chart bars.
• Modern browsers support linear-gradient(in oklch, ...) for perceptual interpolation. If you control which browsers you support, this produces cleaner gradients across opposing hues.
• Save your generated gradient as a CSS custom property rather than inlining the value. Reusing the same gradient across components becomes a one-variable change.

Related tools in this suite

The natural pairing is the Box Shadow Generator — gradients and shadows are the two CSS effects that distinguish polished UI from default UI, and they tend to be tuned together. For hero sections, the Aspect Ratio Calculator is useful when sizing a gradient-filled banner to specific social or display proportions.

What this looks like at scale

A gradient on its own is a flourish; a coherent set of gradients (subtle, dominant, accent) becomes a design system component. The systems we build absorb that progression — turning one-off CSS effects into documented tokens with rules about when they apply and which combinations are sanctioned.

Take it further

If gradients are a recurring decoration choice across your projects rather than a one-off styling decision, formalising them as part of a design system is the right next step. Talk to us about the kinds of system work that turns ad-hoc visual treatments into documented, reusable tokens.