How To Use Clipping And Masking Techniques With CSS

By | Date posted: | Last updated: February 14, 2018

Clipping and masking are two commonly used operation in computer graphics which are used to hide some parts of elements and show other parts.

Clipping defines the region of an element that is visible. Masking is a method of ‘hiding’ a portion of an object based on another object. Masks are images; clips are always vector paths. Outside the path is transparent, inside the path is opaque.

Following is a simple example of using clipping and masking technique with CSS.

The Old/Deprecated clip

  • The first presence of clipping in CSS (other than overflow: hidden; trickery) was the clip property.
css clip

The New clip-path

  • The new, recommend version of applying clipping to elements in CSS is clip-path.
css mask
  • The new way to do this is with inset():
css clipping
  • clip-path though (in some browsers), is circles, ellipses, and polygons.
masking in css


Web design

Using clip-path with an SVG-defined

  • You don’t have to define the clip-path value right in CSS, it can reference a element defined in SVG. Here’s what that looks like:
website design usa

Animating/Transitioning clip-path

  • When you declare a basic shape as a clip-path, you can animate it!
web design
css clipping

  • There was a WebKit-only version of masking where you could link up a raster image or define a gradient to be a mask.
css mask


Html Code:

CSS Code:

img {
width: 150px;
mask-image: -webkit-gradient(linear, left top, right bottom,color-stop(0.00, rgba(0,0,0,1)),color-stop(0.35, rgba(0,0,0,1)), color-stop(0.50, rgba(0,0,0,0)), color-stop(0.65, rgba(0,0,0,0)),
color-stop(1.00, rgba(0,0,0,0)));

masking in css

link up an entire SVG file as the mask, like:

css mask

Mask Types

skynet technologies

Border Types

  • The corners are used in the corners, the edges (can be) repeated along the edges, and the middle (can) stretch in the middle.
clipping mask

  • Different properties and even values have different support levels all over the place.
  • As far as prefixing goes: use the non-prefixed and -webkit- prefix on pretty much everything.

Some of Example of browser support:

css clipping
css mask
css mask
css mask
css mask
css mask
css mask
css mask

Related Articles

10 Web Design Trends to Take Your Site to The Next Level in 2020
Best 50 Free Fonts For 2018
How To Build A Multilayer Parallax With Pure CSS?
Responsive Web Design Trends For 2017
10 Ways To Increase ROI At The End Of The Day By Leveraging Web Design In India