background-clip

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

A propriedade CSS background-clip especifica se o fundo de um elemento, seja cor ou imagem, se extende debaixo de sua área de borda, preenchimento ou conteúdo.

Experimente

Se o elemento não possuir as propriedades background-image ou background-color definidas, esta propriedade só terá um efeito visual quando a borda tiver regiões transparentes ou regiões parcialmente opacas (devido ao border-style ou border-image); caso contrário a borda encobrirá a diferença.

Initial valueborder-box
Aplica-se aall elements. It also applies to ::first-letter and ::first-line.
Inheritednão
Computed valueas specified
Animation typea repeatable list

Sintaxe

css
/* Valores de palavra-chave */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Valores globais */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

Valores

border-box

O fundo se extende até fora da fronteira da borda (mas por baixo da borda na ordenação-z).

padding-box

Nenhum fundo é desenhado abaixo da borda (o fundo se extende até a borda externa do preenchimento).

content-box

O fundo é desenhado dentro (cortado) a caixa de conteúdo.

text Experimental

O fundo é desenhado dentro (cortado) do texto aparente.

Sintaxe formal

background-clip = 
<visual-box>#

<visual-box> =
content-box |
padding-box |
border-box

Exemplos

Usando border-box

Conteúdo HTML

html
<p>O fundo se extende atrás da borda.</p>

Conteúdo CSS

css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
  background-clip: border-box;
}

Resultado

Usando padding-box

Conteúdo HTML

html
<p>O fundo se extende até dentro da fronteira da borda.</p>

Conteúdo CSS

css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
  background-clip: padding-box;
}

Resultado

Usando content-box

Conteúdo HTML

html
<p>O fundo se extende somente até o limite da caixa de conteúdo.</p>

Conteúdo CSS

css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
  background-clip: content-box;
}

Resultado

Usando text

Conteúdo HTML

html
<p>O fundo se extende dentro do texto.</p>

Conteúdo CSS

css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;

  /* Note a necessidade de adicionar trânsparência ao texto*/
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0.2);
}

Resultado

Especificações

Specification
CSS Backgrounds and Borders Module Level 3
# background-clip
CSS Backgrounds Module Level 4
# background-clip

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-clip
border-area
border-box
content-box
padding-box
text

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Veja também