v130 · css

Gradient Span

Four inline highlight styles — gradient fill, pill, marker, and outline border — each using box-decoration-break: clone so wrapped fragments get their own complete decoration. Toggle between clone and slice to see what breaks at line-wrap boundaries.

Feature detection: checking…
Four highlight styles — toggle clone vs slice above clone: each fragment gets full decoration
1 · Gradient background fill
Web platform features often require careful attention to the CSS cascade, specificity rules, and how inheritance behaves across different contexts when composing design systems.
2 · Rounded pill (border-radius: 999px)
The most visually striking case: a span with a full pill border-radius wraps to the next line and the pill continues cleanly on each fragment — but only with clone.
3 · Marker underlay (transparent top, color bottom)
Marker-style highlights using a gradient background look natural across line breaks with clone but produce an ugly broken band at each fragment edge with slice.
4 · Outlined border box
A bordered inline element wraps to multiple lines; clone gives each fragment its own four-sided border, while slice only draws the left and right outer edges.

clone vs slice — visual comparison

slice (and pre-130 block context)
The element box is split at line/column breaks. Padding, border, and border-radius only apply to the outermost edges of the entire run. Visually: the gradient starts once and is sliced; the pill has flat cut ends at each break.
clone (full browser support in Chrome 130)
Each fragment of the element is treated as an independent box with its own complete set of decorations. Every line segment gets its own gradient, pill shape, marker band, or border — exactly as if you had wrapped each line in a separate <span>.
/* clone: each line fragment gets its own complete decoration */
.highlight {
  background: linear-gradient(135deg, black 0%, #444 100%);
  color: white;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;

  /* Chrome 130: works for BOTH inline and block fragmentation */
  box-decoration-break: clone;

  /* Vendor prefix still needed for some engines */
  -webkit-box-decoration-break: clone;
}

/*
  Key Chrome 130 improvement:
  Previously only -webkit-box-decoration-break was supported.
  Chrome 130 added the unprefixed property and extended
  clone support to block fragmentation (print/multicol).
*/

see also