CSS Clipping and Masking
Syntax
- Clipping
- clip-path: <clip-source> | [ <basic-shape> || <clip-geometry-box> ] | none
- Masking
- mask-image: [ none | <mask-reference> ]#
- mask-mode: [ <mask-mode> ]#
- mask-repeat: [ <repeat-style ]#
- mask-position: [ <position> ]#
- mask-clip: [ <geometry-box> | no-clip ]#
- mask-origin: [ <geometry-box> ]#
- mask-size: [ <bg-size> ]#
- mask-composite: [ <compositing-operator> ]#
- mask: [ <mask-reference> <masking-mode>? || <position> [ / <bg-size> ]? || <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> ]#
Parameters
| Parameter | Details |
|---|---|
| clip-source | A URL which can point to an inline SVG element (or) an SVG element in an external file that contains the clip path's definition. |
| basic-shape | Refers to one among inset(), circle(), ellipse() or polygon(). Using one of these functions the clipping path is defined. These shape functions work exactly the same way as they do in Shapes for Floats |
| clip-geometry-box | This can have one among content-box, padding-box, border-box, margin-box, fill-box, stroke-box, view-box as values. When this is provided without any value for <basic-shape>, the edges of the corresponding box is used as the path for clipping. When used with a <basic-shape>, this acts as the reference box for the shape. |
| mask-reference | This can be none or an image or a reference URL to a mask image source. |
| repeat-style | This specifies how the mask should be repeated or tiled in the X and Y axes. The supported values are repeat-x, repeat-y, repeat, space, round, no-repeat. |
| mask-mode | Can be alpha or luminance or auto and indicates whether the mask should be treated as a alpha mask or a luminance mask. If no value is provided and the mask-reference is a direct image then it would be considered as alpha mask (or) if the mask-reference is a URL then it would be considered as luminance mask. |
| position | This specifies the position of each mask layer and is similar in behavior to the background-position property. The value can be provided in 1 value syntax (like top, 10%) or in 2 value syntax (like top right, 50% 50%). |
| geometry-box | This specifies the box to which the mask should be clipped (mask painting area) or the box which should be used as reference for the mask's origin (mask positioning area) depending on the property. The list of possible values are content-box, padding-box, border-box, margin-box, fill-box, stroke-box, view-box. Detailed explanation of how each of those values work is available in the W3C Spec. |
| bg-size | This represents the size of each mask-image layer and has the same syntax as background-size. The value can be length or percentage or auto or cover or contain. Length, percentage and auto can either be provided as a single value or as one for each axis. |
| compositing-operator | This can be any one among add, subtract, exclude, multiply per layer and defines the type of compositing operation that should be used for this layer with those below it. Detailed explanation about each value is available in the W3C Specs. |
Remarks
CSS Clipping and Masking are very new concepts and so the browser support for these properties are pretty low.
Masks:
As at the time of writing (Jul '16), Chrome, Safari and Opera support these properties with the -webkit- prefix.
Firefox doesn't require prefixes but it supports masks only when used with SVG mask elements. For inline SVG mask elements, the syntax is mask: url(#msk) whereas for using mask elements in an external SVG file the syntax is mask: url('yourfilepath/yourfilename.svg#msk'). #msk in both cases refers to the id of the mask element that is being referred to. As indicated in this answer, at present Firefox doesn't support any parameter other than mask-reference in the mask property.
Internet Explorer (and Edge) does not offer any support for this property as yet.
The mask-mode property is currently not supported by any browser with or without prefixes.
Clip-path:
As at the time writing (Jul '16) Chrome, Safari and Opera supports clip-path when the path is created using basic shapes (like circle, polygon) or the url(#clipper) syntax with inline SVG. They don't support clipping based on shapes that are part of external SVG files. Also, they require the -webkit prefix to be present.
Firefox supports only the url() syntax for clip-path whereas Internet Explorer (and Edge) offer no support.
