# Logo on gradient background: how to keep it clear

[Canonical HTML page](https://gradiently.design/guide/logo-on-gradient-background)

Gradients change colour across their width, so a logo that reads at one end can vanish at the other. Here is how to choose the version, the spot and the colour so it never does.

## The short version

- A logo on a gradient background works best as a one-colour version, white or dark, rather than the full-colour original.
- Because a gradient changes brightness across its area, check contrast at the exact spot where the logo sits, not across the whole background.
- WCAG exempts logos from its contrast rules, but its 3:1 minimum for meaningful graphics is a sensible floor for a logo to stay recognisable.
- Place the logo in the calmest, most even region of the gradient, usually a corner, and keep clear space around it.
- Every brand should keep full-colour, white and dark versions of its logo ready before designing on gradients.

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.

Midnight to violet to blush: `linear-gradient(90deg, #1b1033 0%, #6d3fc4 50%, #f6d8c8 100%)`

A white logo reads clearly over the left third, less well in the middle, and almost vanishes on the right. A dark logo does the opposite. Neither works everywhere on this gradient.

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](https://gradiently.design/guide/brand-kit) so nobody improvises. If the logo is itself a gradient, read [gradient logos](https://gradiently.design/guide/gradient-logo) first: a gradient mark on a gradient background rarely works.

| Version | Use it on | Notes |
| --- | --- | --- |
| Full colour | White, off-white or very pale backgrounds | The master. Rarely right on a gradient. |
| Mono white | Dark and mid-dark gradients | The most useful version for gradient work. |
| Mono dark | Light and pastel gradients | Use a near-black from your palette, not pure black, if it looks harsh. |
| One brand colour | Neutral or very pale gradients | Only when the brand colour contrasts with every pixel behind it. |
| Symbol only | Small sizes, avatars, corners | Keeps its shape where a wordmark would get too small to read. |

Five versions cover almost every gradient. Mono white and mono dark do most of the work.

## 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. **Place the logo roughly** Put it where the layout wants it, usually a corner or the top centre.
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. **Test both against the logo colour** Run each pair through a contrast checker such as [WebAIM's](https://webaim.org/resources/contrastchecker/). Aim for at least 3:1 against the worst of the two, and more for small logos.
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. **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](https://gradiently.design/guide/color-contrast-accessibility) explains the ratios in more depth, and [text on a gradient](https://gradiently.design/guide/text-on-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.

A square design with the wordmark Northlight set over a lively gradient, with texture running through the letters

The wordmark over the busiest part of the background: its edges soften where the colour shifts.

The same square design where the gradient behind the wordmark Northlight is calmer and more even, so the letters read crisply

The same wordmark with the calmest region moved behind it: clean edges, no box.

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.

### Solid mono logo

- The logo is one flat colour, white or dark
- Works on nearly every gradient if placed in the right zone
- The default choice for social posts and banners
- Stays clean when compressed

### Knockout or plate

- Knockout: the logo is cut out of a solid shape so the gradient shows through the letters
- Plate: the logo sits on a small solid shape, like a badge
- Both guarantee contrast on very busy gradients
- Both add a shape to the design, so use them on purpose, not as a rescue

## 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.

```css
.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;
}
```

One SVG, two versions. The colour follows the gradient, not the other way round.

> **Skip the drop shadow** A soft shadow behind a logo is the most common rescue, and it usually looks like one: a grey halo on a colourful background. Move the logo or change its version first.

## FAQ

### What colour logo works best on a gradient background?

Usually a one-colour version: white on dark or mid-dark gradients, and a dark near-black from your palette on light or pastel ones. Full-colour logos tend to blend into the gradient.

### Where should a logo go on a gradient?

In the calmest, most even region with the strongest contrast, often a corner, with clear space around it at least the height of one of its letters.

### Do logos need to meet contrast requirements?

WCAG exempts logos from its text contrast rules, but using its 3:1 minimum for meaningful graphics as a floor keeps a logo recognisable.

### Should I put a shadow or box behind my logo?

Try moving the logo or switching to the white or dark version first. Boxes and shadows work but add visual noise; use a deliberate plate or knockout if you need one.

### What is a knockout logo?

A knockout logo is cut out of a solid shape, so the background, in this case the gradient, shows through the letters.