background-clip
Limits where the background is painted. bgct (text) clips the background to text shape for gradient text effects.
Class List
| Class | CSS | Description |
|---|---|---|
bgcbb | background-clip: border-box | Paints background to border area (default) |
bgcpb | background-clip: padding-box | Paints background to padding area only |
bgccb | background-clip: content-box | Paints background to content area only |
bgct | background-clip: text | Clips background to text shape (gradient text) |
Usage Examples
bgct applies gradients or images to text. Set color to transparent to show background.
<!-- Gradient text effect -->
<h1 class="bgct fs4-8rem fw900">
Gradient Text
</h1>
<!-- Background only up to padding area -->
<div class="bgcpb bg6366F1 p2rem b8pxdashed27272A">
No background in the border area
</div>
<!-- Background only in content area -->
<div class="bgccb bg34D399 p2rem b8pxdashed27272A">
Background only fills the content area
</div>Tips
Gradient text pattern
Set background-image (gradient) with bgct and set text color to transparent.
Browser compatibility
bgct may require -webkit-background-clip: text. Supported in most modern browsers.