Logo on gradient background: how to keep it clear

To put a logo on gradient background colours without it disappearing, use a one-colour version of the logo, place it in the calmest part of the gradient where contrast is strongest, and leave clear space around it. A full-colour logo usually shares hues with the gradient and dissolves into it. A white or dark version, placed where the gradient is darkest or lightest, stays crisp at every size.

The rest of this guide explains why logos vanish, which versions to prepare, how to find the right spot and how to check it, with the CSS to do it on the web.

Why logos disappear on gradients

A flat background has one colour, so a logo either contrasts with it or it doesn't. A gradient has many. A white logo that is perfectly clear over the dark end of a blend can fade to nothing over the light end, and a coloured logo can match the gradient's middle so closely that its edges blur.

The lesson: never judge a logo against the gradient as a whole. Judge it against the few pixels directly behind it.

Prepare the logo versions you will need

Most logo problems on gradients are solved before anyone opens a design file, by having the right versions ready. Keep them together in your brand kit so nobody improvises. If the logo is itself a gradient, read gradient logos first: a gradient mark on a gradient background rarely works.

Find the contrast zone and check it

WCAG, the web accessibility standard, exempts logos from its text contrast rules. That exemption is about compliance, not visibility. Its 3:1 minimum for meaningful graphics is a practical floor: below it, a logo starts to lose its edges. Check it like this.

1. 1

   Place the logo roughly

   Put it where the layout wants it, usually a corner or the top centre.

2. 2

   Sample the colours behind it

   Use an eyedropper on the lightest and the darkest pixel directly behind the logo. On a gradient these can differ a lot, even across a small area.

3. 3

   Test both against the logo colour

   Run each pair through a contrast checker such as WebAIM's. Aim for at least 3:1 against the worst of the two, and more for small logos.

4. 4

   Move, don't patch

   If it fails, move the logo towards the darker or lighter end of the gradient, or switch to the other mono version, before reaching for a box or shadow.

5. 5

   Check it small

   Shrink the design to thumbnail size. If the logo becomes a smudge, use the symbol-only version there.

Our guide to colour contrast explains the ratios in more depth, and text on a gradient covers the same problem for headlines.

Where to place a logo on a gradient

Look for the region where the gradient changes least. A logo sitting across a sharp shift in colour looks like it is straddling two backgrounds. Corners are often calm, because many gradients do their most dramatic blending in the middle. Give the logo clear space on every side, at least the height of one of its letters, so the gradient frames it rather than crowding it.

In Gradiently, a Mark knows where your words and logo are: its calmest, best-contrasting region moves behind them and busy detail relaxes nearby, so you rarely need to hunt for the right spot by hand. Logos from your brand kit drop straight into any design.

Knockout, solid or on a plate

There are three ways to set a logo on colour, and each suits a different gradient.

Putting a logo on a CSS gradient

On the web, draw the logo as an inline SVG that uses currentColor, so one CSS colour switches between the white and dark versions. Then place it in the corner where the gradient is darkest. With a 135 degree gradient the top left is where the first colour sits.

.hero {
  position: relative;
  background: linear-gradient(135deg, #1b1033 0%, #6d3fc4 55%, #f6d8c8 100%);
}

/* The SVG's paths use fill="currentColor" */
.hero .logo {
  position: absolute;
  top: 48px;
  left: 48px; /* the darkest corner of this gradient */
  width: 160px;
  color: #ffffff;
}

/* On a light gradient, switch to the dark version */
.hero.light .logo {
  color: #1b1033;
}