記事一覧
Related topics

CSS and gradients

How gradient syntax really works, why gradients turn muddy, and the fixes that keep them clean.

A CSS gradient is a generated image rather than a colour. That one fact explains most of its behaviour: why it belongs in background instead of background-color, and why it can be layered, sized and repeated like any other image.

The failure people hit most often is a gradient going grey in the middle. That is not a bug in your code — it is what happens when a browser interpolates between two saturated hues in sRGB, because the straight line between them passes through a desaturated region.

There are three fixes, and this section works through when each is the right one.

What you'll learn here

  • How gradient angles are measured, and why 0deg points up.
  • How to create a hard edge instead of a blend, without an image.
  • Why fading to `transparent` produces a grey haze, and what to write instead.
  • How to interpolate in OKLCH so the midpoint stays clean.

10 articles

Display P3 and wide gamut: when sRGB is not enough — Advanced.

Display P3 and wide gamut: when sRGB is not enough

Most modern phones and laptops can show colours sRGB cannot describe. Here is how to use them without breaking everyone else.

Relative colour syntax in CSS — CSS.

Relative colour syntax in CSS

The from keyword lets you take an existing colour apart, adjust a channel and put it back together — no preprocessor, no build step.

Theming with CSS custom properties, without a build step — CSS.

Theming with CSS custom properties, without a build step

One set of tokens, a light and dark definition, and a toggle that respects the system setting and remembers a choice.

Making text readable over a photograph — Accessibility.

Making text readable over a photograph

Text on an image is the hardest contrast problem in interface design, because the background changes under every letter. Four techniques that actually work.

LAB, LCH and OKLCH: why perceptual colour spaces matter — Colour theory.

LAB, LCH and OKLCH: why perceptual colour spaces matter

sRGB lies about brightness. Here is what perceptual colour spaces fix, and where they belong in everyday CSS work.

Why gradients band, and four ways to fix it — CSS.

Why gradients band, and four ways to fix it

Those faint stripes across a large gradient are not a rendering bug. They are 8-bit colour running out of steps, and there are several ways around it.

Opacity, alpha and transparent are not the same — CSS.

Opacity, alpha and transparent are not the same

Why opacity on a parent dims its children, why alpha does not, and why fading to transparent produces a grey haze.

CSS gradients: linear, radial and colour stops — CSS.

CSS gradients: linear, radial and colour stops

How gradient syntax really works, why gradients turn muddy in the middle, and the fixes that make them look smooth.

Every CSS colour function, and when to reach for it — CSS.

Every CSS colour function, and when to reach for it

rgb, hsl, hwb, lab, lch, oklab, oklch and color-mix — what each one is for, with the modern syntax you should be writing today.

HEX, RGB and HSL: which colour format to use and when — Colour theory.

HEX, RGB and HSL: which colour format to use and when

The three colour formats you meet daily in CSS, what each one is actually good at, and how to convert between them by hand.

Questions about colour, answered briefly

Related topics

Colour formats and conversionHow HEX, RGB, HSL, HSV, CMYK, XYZ, LAB, LCH and OKLCH relate to one another, and which to reach for when.Design systems and palettesTurning one brand colour into a full interface palette that stays readable and consistent.