What color can do on its own. Backgrounds, edges and shadows, and color treated as a system rather than a list of values. 19 groups, and there is not a single image or line of JavaScript in any of them — every effect here is plain CSS we could apply to the catalog today.
Most are shown rather than compared, because a mesh gradient has no “before”. Where there is a real before, it is side by side and labeled. Each group ends with where we would use it.
Backgrounds
01 — Gradients with a light source
A two-stop gradient reads as a shortcut because every part of it is predictable from every other part. Several soft radials placed at different corners give the field a direction and a shape — it stops looking like a setting and starts looking like a surface.
Where we would use it. Any colored section — the CTA family, hero-gradient, stat-band. All three are one background declaration with no image and no extra element.
02 — A gradient with no gradient in it
Give a gradient stop the same position as the next one and the blend disappears, leaving hard bands of flat color. It is a poster, not a fade, and it costs exactly what a normal gradient costs.
Where we would use it. Hard stops suit a bold statement block. The chevron and checkerboard are better at low contrast as a texture than as a feature — at full strength they fight whatever is on top of them.
03 — Paper, grids and dots
Several background layers on one element, each a repeating gradient at its own size. No images, no tiles to ship, and they scale to any size without going soft.
Where we would use it. Behind a quiet section that needs to be quiet but not empty — faq-columns, spec-table, hours-address. Keep them under about 20% opacity against the surface or they compete with the text.
04 — Hatching, at the strength it wants
The same technique at two very different strengths. The left is a texture you feel rather than see. The right is a pattern you look at. Most designs want the left and reach for the right.
Where we would use it. Hatching is the most useful of these because it survives having text on top of it, which almost no other pattern does.
05 — Photographs, recoloured
A gradient and a photograph in the same element, with background-blend-mode deciding how they combine. Different modes give completely different results from identical inputs — and they make a set of mismatched photographs look like they were shot together.
Where we would use it. This is the strongest argument on the page for treating color as design rather than a buyer option: a site that changes its accent changes its photography with it. Applies to every template with a picture ground.
06 — Edges that are not there
A mask is a gradient used as transparency instead of color. The picture fades to nothing rather than stopping at a line, so it belongs to the page instead of sitting in a box on it.
Where we would use it. The faded base is the useful one: it lets a picture section end without a hard line, which is half of the seam problem solved with one declaration. hero-feature, hero-split, statement-over-image.
Edges
07 — A border made of a gradient
CSS has no gradient border, so this is two backgrounds on one element: the surface color clipped to the padding box, the gradient clipped to the border box, and a transparent border between them. No extra element, and nothing can paint over it.
Where we would use it. A featured card, a selected pricing tier, an offer box — pricing-tiers, offer-card, featured-card-review. It is the cheapest way to say “this one” without making the card bigger.
08 — Corners only
Eight small gradients pinned to the four corners. It suggests a frame without drawing one, which is quieter than a full border and reads as deliberate in a way a dashed line never does.
Where we would use it. Brackets suit a quote or a certification mark. The detached ring is what a focus state should look like — outline-offset keeps it clear of the element so it stays visible on any background.
09 — Cut, notched and scalloped
Three ways to stop a box being a box. The first two are clip-path; the third is a repeating mask, which is how you get an edge that repeats along its length.
Where we would use it. The notch is the most usable — it suits a strip or a badge and does not eat content. The arrow wants to be a step in a sequence: how-to-steps, timeline, setup-guide. The ticket suits offer-box and download-card. Anything clipped needs extra padding on the clipped side, and a drop-shadow rather than a box-shadow — see 14.
10 — Radii that are not circles
Give border-radius a slash and you can set the horizontal and vertical radius of each corner separately — eight numbers. Uneven ones give an organic shape from one property, with no path and no SVG.
Where we would use it. A percentage radius scales with the box, so a card and a thumbnail stay in proportion — a pixel radius does not. The blob suits a photo mask or a decorative shape behind a figure.
11 — Underlines worth having
The default underline runs through the descenders and sits too close to the text. Three properties fix it, and a gradient underline can do things the property cannot — like being two colors.
Judging paragraph qualitydefault — the line runs through the j, g, p and q
Judging paragraph qualityoffset .28em, 2px, skip-ink — the line breaks around every descender
Judging paragraph qualitya gradient background — two colors, which the property cannot do
Where we would use it. Every link in every template. text-underline-offset: .22em and a color at about half strength is the whole recipe, and it makes body copy with links in it noticeably easier to read.
Shadows
12 — A shadow with the object’s color in it
Black shadows are what a renderer does; a real shadow carries some of the color of the thing casting it. Mixing the element’s own hue into its shadow is a small change that reads as expensive, and the two panels below differ by nothing else.
Where we would use it. Anything colored and raised — buttons, featured cards, the CTA family. It costs one color-mix per layer and it is the single biggest “why does theirs look better” difference on this page.
13 — The shadow that follows the shape
Both shapes below are the same clipped pentagon with the same shadow settings. box-shadow is cast by the element’s box, so it ignores the clip and leaks out as a rectangle. filter: drop-shadow is cast by the visible pixels, so it follows the shape.
Where we would use it. Any clipped, notched, scalloped or transparent-PNG element — which includes every specimen in the Edges section above. Getting this wrong is the commonest reason a shaped element looks broken.
14 — Wells, glows and long shadows
Three more jobs for the same property. An inset shadow pushes a surface into the page. A spread with no offset makes a glow. A stack of hard offsets, each a shade darker, makes the long shadow of flat-design posters.
Where we would use it. The well suits an input or a code block. The glow suits a selected state on a dark surface. The long shadow suits a big number — stat-band, stat-pair, scorecard.
Color as a system
15 — Every state from one color
Relative color syntax lets a color be described in terms of another one: take the accent, add six percent lightness, keep everything else. Six states below, all derived from a single value — change that one value and all six follow.
This browser does not support relative color syntax, so these are all showing the base color.
Where we would use it. The most valuable thing on this page for us. A palette role currently has to supply every state by hand. This derives them, so a site with a different accent gets a correct hover, active, soft and ring for free — and nobody has to pick nine colors per role.
16 — One declaration, both themes
light-dark() takes two values and picks one according to the page’s color scheme. It replaces a whole second block of media-query overrides with an inline choice at the point of use.
and watch this panel
This browser does not support light-dark(), so this panel is showing a fallback.
Where we would use it. It needs color-scheme declared on an ancestor to work. Worth knowing about, but our palette already handles themes by swapping custom properties — this would suit one-off decorative values rather than the roles themselves.
17 — Tints that belong to each other
Nine steps of one hue at one chroma, with only the lightness moving. It is arithmetic rather than judgement, and it is why tints from a design system always look like a family while hand-picked ones never quite do.
Where we would use it. Every palette role could generate one of these. The chroma tapers at both ends on purpose — a very light or very dark color cannot hold saturation without going muddy, and that taper is the one part that has to be judged rather than calculated.
18 — Which way a gradient travels
The same two colors four times. The only difference is the space the browser blends through, and how far round the color wheel it is told to go. The first is the default, and it is the only one with a gray patch in the middle.
default — muddy through the middle
in oklab — even
in oklch — travels round the hue wheel
in oklch longer hue — the scenic route
Where we would use it. Every gradient in the suite should be in oklab. The longer hue version is a different effect entirely — a whole spectrum from two colors — and it is worth having for one showpiece and nowhere else.
19 — All of it at once
The right-hand card uses six things from this page: a tinted surface, a conic gradient border, an inset highlight along the top edge, a colored shadow in two layers, grain over the top, and a radius in proportion. The left is the same content with a plain border and a gray shadow.
Ten year guarantee
Insurance backed and transferable if you sell the house.
Ten year guarantee
Insurance backed and transferable if you sell the house.
Where we would use it. This is what the whole page is for. None of it is a new capability — every piece is plain CSS we could write today — and the difference between the two cards is the difference the last wave was missing.
The three worth taking
Relative color syntax (15). A palette role currently has to supply every state by hand. This derives hover, active, soft, ring and opposite from one value, so a site with a different accent gets all of them correct for free. It removes work rather than adding it.
Tinted shadows (12). Mixing an element’s own color into its shadow instead of using black. One color-mix per layer, and it is the clearest single “why does theirs look better” difference here.
Gradient borders (07). Two backgrounds and a transparent border. It is how you mark one card out of five without making it bigger, which is a thing the library needs and has no way to do.
And one to be careful with: drop-shadow against box-shadow (13). Every clipped or notched shape in the Edges section needs the first and will look broken with the second.