#background-clip CSS effects

4 free, pure-CSS effects match the "background-clip" tag. Each is copy-ready and needs no library or build step.

The moving caption is painted by a clipped gradient instead of a flat colour.

The value is the interface: an oversized clipped gradient numeral over a rule that matches its share.

The card border and the knob ring are both painted by the same four stop gradient.

Star ratings fill part way by clipping a hard stop gradient straight into the glyph text.

Popular tags