- clip-path: <clip-source> | [ <basic-shape> || <clip-geometry-box> ] | none
- 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> ]#
|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 |
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 |
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 |
|mask-mode||Can be |
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
10%) or in 2 value syntax (like
|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 |
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 |
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.
CSS Clipping and Masking are very new concepts and so the browser support for these properties are pretty low.
As at the time of writing (Jul '16), Chrome, Safari and Opera support these properties with the
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
#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
Internet Explorer (and Edge) does not offer any support for this property as yet.
mask-mode property is currently not supported by any browser with or without prefixes.
As at the time writing (Jul '16) Chrome, Safari and Opera supports
clip-path when the path is created using basic shapes (like
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.
Clipping and Masking: Overview and Difference
This modified text is an extract of the original Stack Overflow Documentation created by following contributors
and released under CC BY-SA 3.0