Gradients in Brand Color Systems

Used well, brand gradients add depth and energy to a color system without inventing new colors. They blend shades you already own into a smooth transition that feels modern and alive. Used badly, they muddy your palette, hurt readability, and date a design fast. The difference is whether the gradient is built from your system on purpose, or slapped on as decoration.

This guide is for designers and developers who want gradients that strengthen the brand instead of fighting it. I will cover the main gradient types, how to keep a gradient on-brand, how to keep text readable on top of one, the CSS you need to build them cleanly, and a diagram of the patterns. By the end you will use gradients with intent, not as a default.

What you'll learn

• The main types of gradient and when each fits
• How to build a gradient that stays on-brand
• Why some gradients turn gray in the middle and how to fix it
• How to keep text accessible on top of a gradient
• Clean, copy-ready CSS for each pattern

Types of gradient

A gradient is just a smooth blend between two or more colors. The type is mostly about the shape of that blend. Three cover almost every brand need.

Linear gradient

A linear gradient transitions along a straight line, at any angle you choose. It is the workhorse, perfect for hero backgrounds, buttons, and cards. A gentle diagonal from your primary to a nearby shade looks clean and premium.

Radial gradient

A radial gradient spreads outward from a center point in a circle or ellipse. It is great for spotlights, soft glows behind a product shot, or a subtle vignette. It draws the eye toward the bright center.

Conic gradient

A conic gradient sweeps colors around a center point, like the hands of a clock. It is more specialized, used for color wheels, pie-style charts, and bold decorative shapes. Use it deliberately, since it is eye-catching by nature.

How to keep a gradient on-brand

The fastest way to a bad gradient is mixing two unrelated colors. A blend from a random blue to a random pink belongs to no brand. An on-brand gradient pulls its stops from your existing palette, so it reads as a richer version of what you already have.

Blend neighbors on the scale

The safest on-brand gradient blends two shades of the same hue, like your primary 400 and your primary 600. The result is a subtle depth effect that is unmistakably yours. It never clashes, because both stops come from the same color.

Or blend with a harmony

For more energy, blend your primary with a harmonizing hue, like an analogous or complementary color from your system. Indigo into sky blue feels cool and calm. Indigo into amber feels warm and lively. Pick the pairing that matches the mood you want.

Mind the muddy middle

Here is the gradient trap nobody warns you about. When two distant hues blend in the default sRGB space, the midpoint can turn dull and grayish. Blue into orange can pass through a muddy brown halfway across.

The fix is to interpolate in a perceptual space. Modern CSS lets you blend in OKLCH, where the midpoint stays vivid and even. You write in oklch in the gradient, and the dull middle disappears. Our what is OKLCH guide explains why this works, and you can experiment on oklch.com.

Text accessibility on gradients

A gradient background makes text hard to check, because the contrast changes across the surface. White text might pass over the dark end of the gradient and fail over the light end. You cannot check a gradient with a single contrast measurement.

So you check the worst case. Find the lightest point of the gradient under your text and measure the contrast there. If the text passes at the gradient's lightest spot, it passes everywhere. Body text still wants 4.5 to 1 under WCAG. See our WCAG color contrast explained guide.

Add a scrim if needed

If text must sit over a varied gradient, add a scrim. A scrim is a semi-transparent dark or light layer between the gradient and the text. It evens out the background so the text stays readable no matter what is behind it.

A scrim is just another gradient, usually from a translucent black to transparent. It darkens the area right behind the text without hiding the brand gradient elsewhere. This is the standard trick for text over hero images and busy backgrounds.

CSS examples

Here is the CSS you need for each pattern. These are clean and modern, ready to paste.

On-brand linear gradient

A diagonal blend of two shades from the same hue, interpolated in OKLCH so the middle stays clean.

.hero {
  background: linear-gradient(
    135deg in oklch,
    #818cf8 0%,
    #4338ca 100%
  );
}

Radial glow

A soft spotlight that fades from a bright center to a deep edge, good behind a product shot.

.spotlight {
  background: radial-gradient(
    circle at 50% 35%,
    #818cf8 0%,
    #312e81 70%
  );
}

Text scrim over a gradient

Stack a dark scrim under the text on top of the brand gradient so the text stays readable.

.card {
  background:
    linear-gradient(0deg, rgba(2,6,23,.7), transparent 60%),
    linear-gradient(135deg in oklch, #5b5bd6, #0ea5e9);
}

For the full gradient syntax, the MDN gradient reference is the authoritative source. It covers every function, color space, and stop option.

Want gradients that match your scale? Open the Zepixo Colors workspace to generate OKLCH scales, then pull gradient stops straight from your shades so every blend stays on-brand. See the colors overview.

Where brand gradients fit in a system

A gradient is a finish, not a foundation. Your core palette is still solid colors with defined roles. The gradient is an expressive layer you reach for in a few specific places, not the base everything sits on.

Notice these are large or important surfaces, not body text areas or dense tables. Gradients shine where there is room and intent. Keep them out of the places that need to be quiet and readable, and they will always feel like an upgrade.

Keep one gradient signature

The most polished brands use one or two consistent gradients, not a different blend on every page. A single signature gradient, reused, becomes part of your identity. Document its exact stops and angle so it stays the same everywhere.

Use them with restraint

Gradients are rich, so a little goes a long way. A page full of competing gradients feels chaotic and tiring. One strong gradient moment per screen, surrounded by calm solid colors, has far more impact than ten.

Exporting gradients as tokens

If a gradient is part of your brand, treat it like any other brand asset and tokenize it. Store the stops and angle as a named token, like gradient-brand, so every team uses the exact same blend. This keeps the gradient consistent across web, product, and marketing.

A token also makes theming possible. You can define a light-mode and a dark-mode version of the same gradient token, and the app swaps between them. Our color design tokens guide covers naming and export, and Zepixo can export your color scales that feed the stops. See the export reference.

Documenting the gradient is what turns a nice background into a reusable brand element. Without it, every designer reinvents the blend slightly differently. With it, the gradient is as locked down as your primary color.

Frequently asked questions

What makes a gradient look on-brand?

It uses colors from your existing palette. The safest blend is two shades of the same hue, and the next safest is a harmony like analogous or complementary. Random hues that are not in your system make a gradient look generic.

Why does my gradient look muddy in the middle?

Default sRGB blending can pass through a dull gray or brown between two distant hues. Interpolate in a perceptual space instead by adding in oklch to the gradient. The midpoint then stays vivid and even.

How do I check contrast on a gradient?

Find the lightest point of the gradient under your text and measure the contrast there. If the text passes at that worst-case spot, it passes across the whole gradient. Body text still wants 4.5 to 1 under WCAG.

What is a scrim?

A scrim is a semi-transparent layer placed between a background and text to even out contrast. It darkens or lightens the area right behind the text so the text stays readable, while leaving the rest of the gradient visible.

Which gradient type should I use most?

Linear gradients handle most needs, from hero backgrounds to buttons and cards. Radial gradients are best for glows and spotlights. Conic gradients are specialized and eye-catching, so use them deliberately for wheels, charts, or bold shapes.

Should I save my gradient as a token?

Yes, if it is part of your brand. Store the stops and angle as a named token like gradient-brand so every team uses the same blend. A token keeps the gradient consistent and lets you define light and dark versions.

Pull your stops from the palette, blend in OKLCH, check the lightest point, and tokenize the result. Do that and your gradients will always feel like part of the brand. You have got this.