Background Clip
Use bg-clip-text to crop an element’s background gradient to the shape of
its text. This is the only bg-clip-* variant that ships today; see the
deferred class table below.
Style('bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text sm:text-5xl font-extrabold text-transparent ...', child: Text('Hello world'))bg-clip-text is rendered via Flutter’s ShaderMask with BlendMode.srcIn,
which fills the text glyph shapes with the resolved gradient. Pair it with
text-transparent (or any other transparent foreground) for the cropping
effect to be visible.
Class reference
Section titled “Class reference”| Class | Status | Description |
|---|---|---|
bg-clip-text | shipped | Clip background to the foreground text (used with a gradient + text-transparent). |
bg-clip-border | deferred | Not yet correct. Default CSS behaviour — bg fills the entire box including under the border. Tracked in PLAYGROUND_PARITY.md “Library prerequisites”. |
bg-clip-padding | deferred | Not yet correct. Inset background painting by border thickness. Requires custom widget composition. |
bg-clip-content | deferred | Not yet correct. Inset background painting by border + padding. Same blocker as padding. |