Propriedade CSS clip-path

A propriedade clip-path define uma região de recorte: a parte de um elemento que permanece visível. Tudo fora dessa região é ocultado — mas a área oculta ainda ocupa espaço no layout, apenas não é renderizada. Isso permite recortar elementos em formas não retangulares (círculos, hexágonos, setas, estrelas) sem editar as imagens ou o markup subjacentes.

Ao contrário de recortar uma imagem raster em um editor, um clip-path é puramente visual e reversível: o elemento completo ainda está no DOM, permanece clicável apenas dentro do recorte e pode ser animado entre formas.

Esta propriedade aceita quatro tipos de valores:

<clip-source> — um url() apontando para um elemento SVG <clipPath>, para caminhos totalmente personalizados.
<basic-shape> — uma função de forma CSS: circle(), ellipse(), inset() ou polygon().
<geometry-box> — a caixa de referência em relação à qual a forma é medida (border-box, padding-box, content-box ou margin-box).
none — sem recorte; o elemento inteiro é exibido (o padrão).

clip-path substitui a propriedade obsoleta e limitada a retângulos clip. Prefira clip-path em todo código novo: clip funcionava apenas em elementos com posicionamento absoluto e não produzia formas não retangulares.

Quando usar clip-path

Exibir avatares ou miniaturas como círculos ou hexágonos mantendo uma imagem de origem quadrada.
Criar divisores de seção angulados ou diagonais sem imagens de fundo extras.
Revelar ou ocultar conteúdo com uma forma animada (já que valores <basic-shape> são animáveis).
Construir recortes decorativos, emblemas e setas a partir de um único elemento.

Para texto que flui ao redor de uma forma em vez de recortar o elemento, use shape-outside.

Valor Inicial	none
Aplica-se a	Todos os elementos.
Herdado	Não
Animável	Sim, se especificado para `<basic-shape>`.
Versão	CSS Masking Module Level 1
Sintaxe DOM	object.style.clipPath = "none";

Sintaxe

clip-path: <clip-source> | <basic-shape> | <geometry-box> | none | initial | inherit | unset;

As funções basic-shape

Essas quatro funções cobrem quase todas as necessidades de recorte. As coordenadas podem usar qualquer comprimento CSS ou porcentagem; as porcentagens são relativas à caixa de referência.

circle(radius at cx cy) — um círculo. Exemplo: circle(50% at 50% 50%) inscreve o maior círculo centralizado no elemento.
ellipse(rx ry at cx cy) — uma elipse com raios horizontal e vertical separados.
inset(top right bottom left round <radius>) — um retângulo recuado em relação a cada borda, com a palavra-chave opcional round para cantos arredondados.
polygon(x1 y1, x2 y2, …) — um polígono arbitrário definido por uma lista de vértices, no sentido horário. polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) produz um losango.

Para formas que não podem ser expressas com essas funções, referencie um <clipPath> SVG: clip-path: url(#myClip).

Exemplo da propriedade clip-path:

Exemplo da propriedade CSS clip-path com valor basic-shape

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #eee;
      }
      .container {
        display: grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 20px;
        justify-content: center;
      }
      .container div {
        background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-position: center;
        background-size: cover;
        color: #000;
        font-size: 18px;
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .example {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
    </style>
  </head>
  <body>
    <h1>Clip-path property example</h1>
    <div class="container">
      <div class="example">polygon</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

A imagem quadrada é recortada em um losango — seus cantos ficam ocultos enquanto a caixa de layout permanece 200×200.

Exemplo da propriedade clip-path com todos os valores:

Exemplo da propriedade CSS clip-path com valores globais e basic-shape

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #eee;
      }
      .container {
        display: grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 20px;
        justify-content: center;
      }
      .container > div {
        background-image: url(/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg);
        background-position: center;
        background-size: cover;
        color: #000;
        font-size: 18px;
        font-family: sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box1 {
        clip-path: none;
      }
      .box2 {
        clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
        /* values are from-top, from-right, from-bottom, from-left, and optional round keyword for border-radius */
      }
      .box3 {
        clip-path: circle(50% at 50% 50%);
      }
      .box4 {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
      .box5 {
        clip-path: ellipse(90px 50px at 100px 100px);
      }
      .box6 {
        clip-path: inherit;
      }
      .box7 {
        clip-path: initial;
      }
      .box8 {
        clip-path: unset;
      }
    </style>
  </head>
  <body>
    <h2>Clip-path property example</h2>
    <div class="container">
      <div class="box1">none</div>
      <div class="box2">inset</div>
      <div class="box3">circle</div>
      <div class="box4">polygon</div>
      <div class="box5">ellipse</div>
      <div class="box6">inherit</div>
      <div class="box7">initial</div>
      <div class="box8">unset</div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Animando clip-path

Quando os estados inicial e final usam a mesma função <basic-shape> com o mesmo número de pontos, os navegadores podem interpolar suavemente entre eles. Isso torna possíveis revelações e morfoses de formas com uma transition ou uma animation:

.reveal {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.4s ease;
}
.reveal:hover {
  clip-path: circle(75% at 50% 50%);
}

Um polygon() só pode ser animado para outro polygon() com o mesmo número de vértices, portanto mantenha a contagem de pontos igual em ambas as extremidades.

Suporte a navegadores e dicas

clip-path com valores <basic-shape> é suportado em todos os navegadores modernos. Versões mais antigas exigiam o prefixo -webkit-; hoje uma declaração sem prefixo é suficiente para navegadores evergreen.
A área oculta é removida apenas visualmente — ainda afeta o layout e não é clicável, portanto o restante da página não é afetado.
Um recorte pode ocultar contornos, box-shadows e anéis de foco que ficam fora da forma; verifique se o foco via teclado permanece visível.

Valores

Valor	Descrição
`<clip-source>`	O `<url>` que referencia um elemento SVG `<clipPath>`.
`<basic-shape>`	Uma função de forma básica como `circle()`, `ellipse()`, `inset()` ou `polygon()`. Pode ser combinada com um `<geometry-box>` usando uma barra (`/`).
`<geometry-box>`	Define a caixa de referência para a forma básica (por exemplo, `border-box`, `padding-box`, `content-box`, `margin-box`).
none	Nenhum caminho de recorte é criado.

Nota: initial, inherit e unset são valores CSS globais e podem ser usados com qualquer propriedade.

Prática

O que a propriedade CSS clip-path faz?

Define uma região de recorte que pode ser aplicada a qualquer elemento HTML ou SVG para controlar sua parte visível.Adiciona cor de fundo a um elemento.Ajusta o tamanho do texto dentro de um elemento.Controla a forma da região de recorte que define qual parte de um elemento deve ser exibida.Ajusta a margem ao redor de um elemento.