---
url: /docs/foundations/css-classes/background-clip.md
---
> Backgrounds

# Background Clip

Utilities for controlling the bounding box of an element's background.

## Quick reference

| Class | Description |
|-------|-------------|
| `bg-clip-border` | `-webkit-background-clip: border-box background-clip: border-box` |
| `bg-clip-padding` | `-webkit-background-clip: padding-box background-clip: padding-box` |
| `bg-clip-content` | `-webkit-background-clip: content-box background-clip: content-box` |
| `bg-clip-text` | `-webkit-background-clip: text background-clip: text` |

## Basic usage

### Setting the background clip

Use the `bg-clip-{keyword}` utilities to control the bounding box of an element’s background.

```html
<div class="bg-clip-border ... "></div>
<div class="bg-clip-padding ... "></div>
<div class="bg-clip-content ... "></div>
```

### Cropping to text

Use `bg-clip-text` to crop an element’s background to match the shape of the text. Useful for effects where you want a background image to be visible through the text.

```html
<span class="bg-clip-text bg-cover text-transparent bg-[url(...)]">
  Warp speed
</span>
```