Propriedade Background Clip
Última atualização: 2026-09-13
background-clip Propriedade Background Clip
A propriedade background-clip controla a área de pintura de um fundo, decidindo em qual região do box model o fundo (cor ou imagem) é exibido. O padrão border-box estende o fundo sob a borda, padding-box recorta-o para a área de padding e content-box o mostra apenas na área de conteúdo. O CSS3 também adicionou o valor text para efeitos de recorte de texto.
| Categoria | |
|---|---|
| Valor Inicial | border-box |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
background-clip: border-box | padding-box | content-box | text;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
border-box | padding-box | content-box | text | Palavra-chave | Área de pintura do fundo |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-clip | ✓ v4 | ✓ v12 | ✓ v4 | ✓ v3.1 | ✓ v10 |
| Suportado em todos os principais navegadores | |||||
Dica： A diferença entre border-box e padding-box fica mais fácil de ver com uma borda transparente ou tracejada.
Importante： O background-clip: text exige -webkit-text-fill-color: transparent para revelar o efeito de recorte de texto.
❓ Perguntas Frequentes
QQual é a diferença entre background-clip e background-origin?
Aclip controla onde a pintura do fundo para (o limite de recorte), enquanto origin controla o ponto de referência para o posicionamento da imagem de fundo. Por exemplo, clip: border-box deixa o fundo se estender sob a borda, enquanto origin: border-box posiciona a imagem a partir do canto superior esquerdo da borda. background-color é afetada apenas por clip; origin se aplica apenas a imagens de fundo.
QComo criar um efeito de texto com gradiente?
ATrês passos: defina o gradiente com background-image; recorte o fundo para o contorno do texto com background-clip: text; e torne o preenchimento do texto transparente com -webkit-text-fill-color: transparent. Adicione também background-repeat: no-repeat para que o gradiente não se repita em mosaico.
QO que faz cada um dos três valores de background-clip?
Aborder-box (padrão): o fundo se estende até a área da borda, e a borda é pintada por cima dele. padding-box: o fundo aparece apenas dentro da área de padding, sem fundo sob a borda. content-box: o fundo aparece somente na área de conteúdo, então nem a região de padding tem fundo. Adicione uma borda a um elemento e compare — uma borda transparente ou tracejada deixa a diferença óbvia.
QQual é o suporte de navegadores para background-clip: text?
ATodos os navegadores modernos suportam background-clip: text, mas Safari/Chrome mais antigos precisam do prefixo -webkit-background-clip: text junto com -webkit-text-fill-color: transparent. Onde não houver suporte, o texto volta para uma cor de preenchimento normal, então é uma boa ideia oferecer um fallback via @supports.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
