Are Gradients and Grain Still Worth Using?

Are gradients and noise textures still worth using?

Yes, when they do structural work, and no when they are there to look current. A gradient that separates one region of a page from another is earning its place. A gradient behind the hero because every competitor has one is decoration with a contrast problem attached, and it dates faster than almost anything else on a site.

We see a lot of inherited B2B sites where the gradient is the only idea in the design. Remove it and the layout underneath has no hierarchy at all, which tells you the gradient was carrying weight it was never designed to carry.

So this is an argument for using both deliberately, plus the technical details that decide whether they look good or cheap.

Why did every B2B site end up with the same gradient?

Because it is the cheapest way to look expensive. A two colour diagonal blend reads as modern, costs nothing to produce, needs no photography, no illustration budget, and no art direction. When a site needs to feel designed by Friday, that is what gets reached for.

The result is a visual language that signals nothing. If the gradient on your site could be swapped with the gradient on four competitors and nobody would notice, it is not doing brand work, it is filling space. Our notes on why websites look the same go into how this convergence happens.

That is not an argument against gradients. It is an argument against borrowing one. A gradient built from your actual brand colours, used in one consistent way, reads very differently from a stock blend applied everywhere.

What does a gradient actually do for hierarchy?

It creates regions without borders. A page is easier to scan when the eye can tell where one section stops and the next begins, and a gradient gives you that boundary without a hard line or a box.

It also directs attention through value. A surface that gets lighter towards one corner pulls the eye there, which is useful if that corner holds your primary action and actively harmful if it holds your legal footer. Used with intent, a gradient is a pointing device.

The test we apply is whether removing it changes how the page reads. If nothing changes, it was decoration. If the sections blur together, it was structure. Spacing, type scale and alignment are the other tools in that set.

Why do gradients look banded, and how do you fix it?

Because the interpolation between your stops is doing something you did not ask for. MDN describes linear-gradient as creating an image consisting of a progressive transition between two or more colours along a straight line, with colours transitioning smoothly and the midpoint between two stops being the halfway point of the transition by default.

That default midpoint is adjustable, and adjusting it is the first fix. MDN notes you can move the midpoint to any position between two colour stops by adding an unlabelled percentage colour hint between the colours. A blend that goes muddy in the middle usually just needs its midpoint shifted.

The second fix is the colour space. MDN documents interpolation method syntax, with examples such as a gradient declared in oklab or in hsl with longer hue, as part of CSS Color Module Level 4 and Level 5, noting support varies by browser. Interpolating in a perceptual space avoids the grey dead zone you get between complementary colours, which is the cause of most ugly gradients.

How does grain or noise actually get added?

Usually with an SVG filter rather than an image. MDN describes the feTurbulence filter primitive as creating an image using the Perlin turbulence function, allowing the synthesis of artificial textures like clouds or marble, filling the entire filter primitive subregion.

Two attributes control the look. MDN lists a type attribute accepting fractalNoise or turbulence, with baseFrequency controlling the base frequency of the pattern, where lower values create larger features, and numOctaves controlling the number of octaves in the Perlin noise calculation, affecting complexity and detail.

The support story is better than people assume. MDN lists feTurbulence as Baseline widely available, noting it has been available across browsers since July 2015. This is not a new technique and there is no compatibility argument against it.

What does noise cost?

Enough that you should scope it. A filter generating a procedural texture is real work for the browser, and applying it across a full viewport element, animating it, or stacking it under other effects is where it gets expensive. Applied once to a contained surface, it is cheap.

The alternative of a small tiling PNG is a different trade: a network request and a decode instead of a computation. For a single subtle grain layer, a tiny tiled image is often the pragmatic choice, and for anything that needs to adapt to colour it is not.

Either way, measure it on a mid-range phone rather than on your laptop. Texture effects are exactly the kind of thing that feels free on development hardware and costs a visible chunk of rendering time on the device most of your visitors use.

Can text sit on a gradient?

Only if it clears the contrast threshold at every point along the blend. WCAG success criterion 1.4.3, Contrast Minimum, is Level AA and requires a contrast ratio of at least 4.5 to 1 for the visual presentation of text, with large text allowed 3 to 1.

Large text has a specific definition in the criterion: at least 18 point, or 14 point bold, or a size yielding equivalent size for Chinese, Japanese and Korean fonts. So a bold heading gets more latitude than body copy, which is often the reason a hero headline passes and the subheading under it does not.

The failure mode is particular to gradients. People check the contrast at one point, usually where the text starts, and the ratio drops below the threshold two thirds of the way across the line. Check both ends and the middle, or put the text on a solid surface sitting above the gradient. Our notes on building a palette cover picking colours that survive this.

What about people who have reduced transparency switched on?

You can detect it, with a caveat. MDN describes the prefers-reduced-transparency media feature as detecting whether a user has enabled a device setting to reduce transparent or translucent layer effects, with values of no-preference and reduce, noting the setting helps improve contrast and readability for some users.

The caveat is support. MDN marks the feature as limited availability and not Baseline, because it does not work in some of the most widely-used browsers, and flags it as experimental technology needing a careful look at the compatibility table before production use.

So treat it as a progressive improvement rather than your accessibility answer. The reliable approach is to make the default readable for everyone, then use the media feature to simplify further where it is supported. Our notes on designing for reduced motion describe the same layered approach.

When is a gradient the wrong answer?

When it is hiding a layout problem. If sections are not distinguishable without the gradient, the spacing, type scale, and alignment are not doing their jobs, and adding colour over the top makes the page look designed without making it readable.

It is also wrong behind dense content. Tables, long forms, and documentation pages need a stable surface, because a shifting background makes every row sit on a slightly different colour and the eye has to work harder on every line.

And it is wrong when there are three of them. One gradient used consistently is a design decision. Four different ones across a site is an absence of one, and it is the clearest sign that the colour choices were made page by page rather than as a system.

How do we use gradients in our own work?

Sparingly, from brand colours, and in one defined role per project. Usually that means a single gradient reserved for one kind of surface, so that when a visitor sees it they are seeing a consistent signal rather than ornamentation.

We also tend to pair a gradient with a grain layer rather than using either alone. A flat two colour blend reads as digital and slightly cheap at large sizes, and a very light texture over the top removes that without anyone consciously noticing. That is the whole reason the technique became popular, and it still works when applied once.

Where we are blunt with clients: a gradient will not make a site feel premium on its own. Spacing, type, and restraint do that, and a gradient on a crowded page just makes it a colourful crowded page. Our notes on what makes a website feel premium set out what actually carries that feeling.

What replaces the gradient era?

Probably more specific visual systems rather than a single new effect. The tooling has quietly got much better, with perceptual interpolation and procedural texture both now ordinary, which means the gap between a considered surface and a borrowed one is widening. The effect is no longer the differentiator; the intent behind it is.

Our bet is that the sites that look dated in two years will be the ones whose entire visual identity was a blend direction. The ones that hold up will be those where the gradient was one consistent element in a system that would still work without it.

If you are looking at a site that feels generic and you are not sure whether the gradient is the problem or the symptom, we are happy to take a look. Find us at phoenix.studio.