Why does linear-gradient repeat behavior change between anchor and h2 elements?-CodePudding

Why is the exact same CSS applied to the <a> element and the <h2> element producing different results? Ideally I would like to emulate the behavior of the anchor on the H2 without using repeating-linear-gradient because I like the way it repeats cleanly on each line.

:root {
  --blue_green_text: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(125, 255, 209, 1) 40%, rgba(0, 117, 255, 1) 100%);
}

body {
  background: black;
}

a {
  background-image: var(--blue_green_text);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  background-image: var(--blue_green_text);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</a>

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>

CodePudding user response：

The element itself has little bearing on this. What matters if the value of the CSS display property.

<a> elements are, by default, display: inline and headings are display: block.

Inline elements generate a series of inline boxes, generating a new box on a new line when wrapping occurs. You get a fresh gradient for each inline box.

Block elements generate a block box. The lines of text get their own inline boxes, but the gradient is applied to the element's block box.

Set the display property explicitly to normalise the behaviour.