Recortes coloridos

Recursos da Web: Máscaras

Visão geral

A máscara CSS permite recortar um elemento em uma forma personalizada, como adicionar um entalhe a um card ou criar uma borda com formato. Ao combinar formas para layouts complexos, escolha sua estratégia de mascaramento com base no tipo de conteúdo que o elemento contém:

Estratégia de mascaramento Ideal para Impacto do texto
Máscara SVG de elemento direto Imagens, ícones, formas decorativas, formas complexas Não recomendado (pode cortar o texto)
Máscara SVG de elemento adjacente Cards com texto, conteúdo crucial O texto permanece totalmente legível
Gradientes CSS puros Formas geométricas simples Não recomendado (pode cortar o texto)

Implementação

Para implementar recortes de formato:

Como usar uma máscara SVG

As máscaras SVG permitem definir formas que subtraem ou adicionam à área visível usando preenchimentos brancos (revelar) e pretos (ocultar).

Máscara de luminância x máscara alfa: as máscaras SVG usam como padrão o modo de luminância (brilho). Por isso, usamos fill="white" para revelar áreas e fill="black" para cortá-las. Se você preferir usar a transparência do SVG (canal Alfa) em vez de cores, defina mask-type: alpha; no CSS ou mask-type="alpha" no elemento <mask> do SVG.

Máscara SVG de elemento direto

Quando não há texto dentro do elemento (como avatares de perfil, imagens de produtos ou ilustrações), é possível aplicar a máscara SVG diretamente ao elemento.

O uso de maskContentUnits="objectBoundingBox" dentro da máscara SVG garante que ela seja dimensionada automaticamente para a largura e a altura de qualquer elemento em que seja aplicada.

<!-- 1. Define the mask in SVG (hidden from view) -->
<svg width="0" height="0" style="position: absolute;" aria-hidden="true">
  <defs>
    <!-- objectBoundingBox makes the mask scale from 0 to 1 along the element's borders -->
    <mask id="splat-mask" maskContentUnits="objectBoundingBox">
      <!-- Organic Bezier path defining an artistic paint splat shape -->
      <path d="M 0.5 0.05 C 0.58 0.05, 0.58 0.21, 0.67 0.18 C 0.76 0.15, 0.79 0.08, 0.85 0.15 C 0.91 0.22, 0.83 0.32, 0.89 0.38 C 0.95 0.44, 1.03 0.45, 0.99 0.55 C 0.95 0.65, 0.82 0.62, 0.8 0.72 C 0.78 0.82, 0.89 0.92, 0.8 0.97 C 0.71 1.02, 0.64 0.88, 0.55 0.93 C 0.46 0.98, 0.44 1.06, 0.35 1.01 C 0.26 0.96, 0.31 0.81, 0.22 0.79 C 0.13 0.77, 0.01 0.88, 0.01 0.77 C 0.01 0.66, 0.16 0.62, 0.14 0.52 C 0.12 0.42, -0.02 0.39, 0.03 0.29 C 0.08 0.19, 0.23 0.27, 0.29 0.19 C 0.35 0.11, 0.3 0.01, 0.4 0.01 C 0.5 0.01, 0.42 0.05, 0.5 0.05 Z" fill="white" />
    </mask>
  </defs>
</svg>

<!-- 2. Apply the mask to the image element -->
<img src="avatar.jpg" alt="User Profile" class="shaped-avatar">

<style>
.shaped-avatar {
  width: 200px;
  height: 200px;
  object-fit: cover;
  
  /* Apply the SVG mask ID with standard and webkit-prefixed properties */
  -webkit-mask-image: url(#splat-mask);
  mask-image: url(#splat-mask);
}
</style>

Máscara SVG de elemento adjacente

Aplique a máscara a um elemento adjacente, em vez de ao elemento pai que contém o texto. Isso garante que o texto não seja cortado e permaneça legível.

Para resolver isso, estruture o componente em um layout de duas partes:

  1. Um contêiner de texto seguro e sem máscara (.card-body) para todo o conteúdo legível.
  2. Um div decorativo vazio (.card-accent) colocado ao lado dele, que recebe a máscara SVG personalizada.

Ao atribuir a mesma cor de plano de fundo às duas partes, elas se fundem visualmente em um único componente com formato personalizado.

<!-- 1. Define the SVG mask (hidden from view) -->
<svg width="0" height="0" style="position: absolute;" aria-hidden="true">
  <defs>
    <!-- Use objectBoundingBox to make the mask scale with the element -->
    <mask id="accent-stencil" maskContentUnits="objectBoundingBox">
      <!-- Fill the entire area with white (fully visible) -->
      <rect width="1" height="1" fill="white" />
      <!-- Draw a black shape to cut out a concave curve. Extending the path to x=1.1 guarantees it fully clears the right edge, preventing subpixel lines -->
      <path d="M 1.1,0 C 0.4,0.1 0.4,0.9 1.1,1 L 1.1,0 Z" fill="black" />
    </mask>
  </defs>
</svg>

<!-- 2. Create the unified card layout -->
<div class="unified-card">
  <!-- The text-bearing element remains unmasked and perfectly rectangular -->
  <div class="card-body">
    <h3>Premium Membership</h3>
    <p>Get exclusive weekly updates on modern web standards and premium UI designs.</p>
  </div>
  <!-- The empty accent element next to it is masked to form the custom shape -->
  <div class="card-accent"></div>
</div>

<style>
.unified-card {
  display: flex;
  width: 400px;
}

.card-body {
  flex: 1;
  background-color: #1e293b; /* Elegant slate color */
  color: #f8fafc;
  padding: 24px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.card-accent {
  width: 60px;
  background-color: #1e293b; /* Same background color so they merge visually without seams */
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;

  /* Reference the SVG mask */
  -webkit-mask-image: url(#card-accent-mask);
  mask-image: url(#card-accent-mask);
}
</style>

Como usar um único gradiente CSS para recortes simples

Quando você só precisa de recortes geométricos simples (como um entalhe superior semicircular, recuos laterais ou cortes diagonais retos), não é necessário escrever ou referenciar um SVG externo. Em vez disso, é possível definir um gradiente radial ou linear de CSS diretamente na propriedade mask-image.

<div class="gradient-masked-card">
  <h3>Notched Coupon Card</h3>
  <p>This card uses a pure CSS radial gradient to cut out a semi-circular notch along its top edge.</p>
</div>

<style>
.gradient-masked-card {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  padding: 40px 24px 24px 24px; /* Extra top padding ensures content clears the notch */
  border-radius: 16px;
  text-align: center;

  /* radial-gradient places a circle at 50% (horizontal center) and 0% (top edge), cutting out a 20px transparent notch */
  -webkit-mask-image: radial-gradient(circle at 50% 0%, transparent 20px, black 21px);
  mask-image: radial-gradient(circle at 50% 0%, transparent 20px, black 21px);
}
</style>

Estratégias de fallback

Se um navegador não for compatível com mask-image ou com a versão prefixada:

  • Para imagens com formato: o elemento vai se degradar de forma elegante, aparecendo como um elemento retangular normal com os estilos de substituição padrão.
  • Para cards com formato: o elemento decorativo .card-accent adjacente vai continuar sendo um retângulo sólido sem máscara. Como ele compartilha a mesma cor de fundo do contêiner de texto, o card inteiro será renderizado como um contêiner retangular padrão e limpo.
  • Aprimoramento progressivo: ao manter as camadas de texto totalmente fora da máscara, você garante que o conteúdo permaneça legível, estruturado e acessível em navegadores mais antigos.