CSS and SVG Masks Example

CSS and SVG Masks

Back to Tutorial
Text

CSS and SVG Masks

CSS clip

Specification 

.item {
  position: absolute;
  clip: rect(10px, 190px, 190px, 10px);
  }

CSS clip-path

Specification 

.item {
  clip-path: circle(100px, 100px, 100px);
  clip-path: circle(100px at center);
  }
 Syntax for circle was chnaged, to radial gradient syntax

SVG clip-path for SVG elements

Specification 

<clipPath id="clipping">
  <polygon points="98.4999978 153.75..."/>
</clipPath>
 
.item {
  clip-path: url(#clipping);
  }

SVG clip-path for HTML elements

Specification 

<clipPath id="clipping">
  <polygon points="98.4999978 153.75..."/>
</clipPath>
 
.item {
  clip-path: url(#clipping);
  }

SVG clip-path with complex content for HTML elements

Specification 

<clipPath id="clipping">
  <polygon points="98.4999978 153.75..."/>
  <text x="0" y="3.2em">Text 
</clipPath>
 
.item {
  clip-path: url(#clipping);
  }

CSS mask-image

Specification 

.item {
  mask-image: url(YOUR.png), 
                    linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-repeat: space;
  }
 Mask image: PNG

SVG mask for SVG elements

Specification 

<mask id="masking" maskUnits="objectBoundingBox" 
  maskContentUnits="objectBoundingBox">
  <rect y="0" width="1" height="1" fill="url(#gradient)" />
  <circle cx=".5" cy=".5" r=".4" fill="gray" />
  <circle cx=".5" cy=".5" r=".3" fill="white" />
  ...
</mask>
 
.item {
  mask: url(#masking);
  }

SVG mask for HTML elements

Specification 

<mask id="masking" maskUnits="objectBoundingBox" 
  maskContentUnits="objectBoundingBox">
  <rect y="0" width="1" height="1" fill="url(#gradient)" />
  <circle cx=".5" cy=".5" r=".4" fill="gray" />
  <circle cx=".5" cy=".5" r=".3" fill="white" />
  ...
</mask>
 
.item {
  mask: url(#masking);
  }
Text

background-clip

Documentation 

.item {
  background: url(YOUR IMAGE) no-repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  }
Text

SVG fill

Specification

Not real mask, but looks like -webkit-background-clip: text; and has much better support.


<pattern id="pattern" patternUnits="userSpaceOnUse"
             width="200" height="300" viewbox="0 0 200 300">
  <image xlink:href="YOUR IMAGE" width="200" height="300" />
</pattern>
 
text {
  fill: url(#pattern);
  }