1. the reported case — blue text on the page background, no slab

Gradient headline

Both stops are #2c17a3, so this must come out as plain #2c17a3 lettering. Before background-clip existed it was black text on a solid blue rectangle.

2. vertical gradient text — pink at the top fading to blue

Vertical ramp across the glyphs

`color: transparent` is deliberately in the rule: it is what the paint replaces. If the value were ignored the line would vanish.

3. horizontal gradient text — orange on the left, green on the right

Horizontal ramp across the line

4. two lines — the ramp spans the whole element, not each line

First line of the heading
second line of the heading

The gradient is measured over the element's border box, so line one starts pink and line two ends blue.

5. solid colour + clip — dark goldenrod text, no rectangle

Solid colour through the glyphs

6. `-webkit-` spelling alone — same as section 3

Prefixed spelling only

Below is the control: the same gradient with no clip at all, which must still paint as a filled band with white text on it.

No clip (control)

7. background-clip: border-box — fill under the whole border

border-box

8. background-clip: padding-box — fill stops at the border

padding-box

9. background-clip: content-box — fill stops at the padding

content-box

The 10px border is `rgba(200,0,0,0.45)`, so it reads purple where the blue fill is under it (7) and pink where it is not (8, 9). In 9 the fill retreats a further 10px of padding on every side, leaving a white frame inside the border.

10. image background + clip:text — image painted, red text over it

Image background, unsampleable

There is no way to sample an image background per band, so the clip is declined outright: the element paints exactly as it would with no `background-clip` at all, keeping its cascaded `color` (#c62828). A compositing browser would show the tiles only inside the glyphs. Suppressing the background here would be strictly worse -- with `color: transparent` it would leave a blank line.

11. borders and padding — ramp measured over the border box

Teal to indigo

The border box includes the 8px border and 12px padding, so neither end of the ramp is fully reached by the first and last glyph.

12. nested inline — the paint reaches descendants

outer and nested span

`background-clip` is not inherited in CSS, but its effect on descendant text is; the nested span must be part of the same ramp.