mask
The mask CSS property is shorthand for mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-composite, and mask-mode.
CSS
JS
object.style.mask = "value";
Values
<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? ||<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>
<mask-reference> = none | <image> | <mask-source>
none
A transparent black image layer.
<image> = <url> | <gradient>
<url> = url( <string> <url-modifier>* )
<string>
Specifies a sequence of characters delimited by double quotes (") or single quotes (').
<url-modifier>
Changes the meaning or the interpretation of the URL.
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
rad
Radians. There are 2p radians in a full circle.
turn
Turns. There is 1 turn in a full circle.
<side-or-corner> = [left | right] || [top | bottom]
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<repeating-linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
deg
Degrees. There are 360 degrees in a full circle.
grad
Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
rad
Radians. There are 2p radians in a full circle.
turn
Turns. There is 1 turn in a full circle.
<side-or-corner> = [left | right] || [top | bottom]
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>
Determines whether the gradient's ending shape is a circle or an ellipse.
<size>
Determines the size of the gradient's ending shape.
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<repeating-radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<ending-shape>
Determines whether the gradient's ending shape is a circle or an ellipse.
<size>
Determines the size of the gradient's ending shape.
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<color>
Specifies the color using a keyword or a numerical specification.
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<linear-color-hint> = <length-percentage>
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<url> = url( <string> <url-modifier>* )
<string>
Specifies a sequence of characters delimited by double quotes (") or single quotes (').
<url-modifier>
Changes the meaning or the interpretation of the URL.
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain
<length-percentage> = [ <length> | <percentage> ]
<length>
Specifies the length using a number followed by a unit of measurement.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
auto
Automatically specified by the user agent.
cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
contain
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
repeat-x
The image is repeated in the horizontal direction as often as needed to cover the background painting area.
repeat-y
The image is repeated in the vertical direction as often as needed to cover the background painting area.
repeat
The image is repeated in the horizontal and vertical direction as often as needed to cover the background painting area.
space
The image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area.
round
The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does.
no-repeat
The image is placed once and not repeated in this direction.
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
<shape-box> = <box> | margin-box
<box> = border-box | padding-box | content-box
border-box
Area within the border box.
padding-box
Area within the padding box.
content-box
Area within the content box.
margin-box
Area within the margin box.
fill-box
Uses the object bounding box as a reference box.
stroke-box
Uses the stroke bounding box as a reference box.
view-box
Uses the nearest SVG viewport as a reference box.
no-clip
The painted content is not restricted (not clipped).
<compositing-operator> = add | subtract | intersect | exclude
add
The source is placed over the destination.
subtract
The source is placed, where it falls outside of the destination.
intersect
The parts of source that overlap the destination, replace the destination.
exclude
The non-overlapping regions of source and destination are combined.
<masking-mode> = alpha | luminance | match-source
alpha
Indicates the alpha values of the mask layer image should be used as the mask values.
luminance
Indicates the luminance values of the mask layer image should be used as the mask values.
match-source
The value specified by the referenced mask element's mask-type property must be used.
mask-clip | border-box
mask-clip | content-box
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask: url(/assets/png/HappyFace.png) margin-box content-box;
padding: 10px;
}
</style>
</head>
<body>
<div>
content-box
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
mask-clip | fill-box
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask: url(/assets/png/HappyFace.png) margin-box fill-box;
padding: 10px;
}
</style>
</head>
<body>
<div>
fill-box
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
mask-clip | margin-box
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask: url(/assets/png/HappyFace.png) margin-box margin-box;
padding: 10px;
}
</style>
</head>
<body>
<div>
margin-box
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
mask-clip | no-clip
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask: url(/assets/png/HappyFace.png) margin-box no-clip;
padding: 10px;
}
</style>
</head>
<body>
<div>
no-clip
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
mask-clip | padding-box
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask: url(/assets/png/HappyFace.png) margin-box padding-box;
padding: 10px;
}
</style>
</head>
<body>
<div>
padding-box
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
mask-clip | stroke-box
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask: url(/assets/png/HappyFace.png) margin-box stroke-box;
padding: 10px;
}
</style>
</head>
<body>
<div>
stroke-box
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
mask-clip | view-box
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask: url(/assets/png/HappyFace.png) margin-box view-box;
padding: 10px;
}
</style>
</head>
<body>
<div>
view-box
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
mask-composite | add
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) add, url(/assets/png/Star.png);
}
</style>
</head>
<body>
<div>add</div>
</body>
</html>
mask-composite | exclude
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) exclude, url(/assets/png/Star.png);
}
</style>
</head>
<body>
<div>exclude</div>
</body>
</html>
mask-composite | intersect
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) intersect, url(/assets/png/Star.png);
}
</style>
</head>
<body>
<div>intersect</div>
</body>
</html>
mask-composite | subtract
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) subtract, url(/assets/png/Star.png);
}
</style>
</head>
<body>
<div>subtract</div>
</body>
</html>
mask-image | image | gradient | linear-gradient
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: linear-gradient(black, transparent);
}
</style>
</head>
<body>
<div>linear-gradient</div>
</body>
</html>
mask-image | image | gradient | radial-gradient
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: radial-gradient(black, transparent);
}
</style>
</head>
<body>
<div>radial-gradient</div>
</body>
</html>
mask-image | image | url
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png);
}
</style>
</head>
<body>
<div>url</div>
</body>
</html>
mask-image | none
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: none;
}
</style>
</head>
<body>
<div>none</div>
</body>
</html>
mask-mode | alpha
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
mask: url(#myid) alpha;
}
</style>
</head>
<body>
<div>alpha</div>
<svg>
<mask id="myid" style="mask-type: alpha">
<rect fill="red" height="100" width="100"/>
</mask>
</svg>
</body>
</html>
mask-mode | luminance
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
mask: url(#myid) luminance;
}
</style>
</head>
<body>
<div>luminance</div>
<svg>
<mask id="myid" style="mask-type: alpha">
<rect fill="red" height="100" width="100"/>
</mask>
</svg>
</body>
</html>
mask-mode | match-source
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
mask: url(#myid) match-source;
}
</style>
</head>
<body>
<div>match-source</div>
<svg>
<mask id="myid" style="mask-type: alpha">
<rect fill="red" height="100" width="100"/>
</mask>
</svg>
</body>
</html>
mask-origin | border-box
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask: url(/assets/png/HappyFace.png) border-box;
padding: 10px;
}
</style>
</head>
<body>
<div>
border-box
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
mask-origin | content-box
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask: url(/assets/png/HappyFace.png) content-box;
padding: 10px;
}
</style>
</head>
<body>
<div>
content-box
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
mask-origin | fill-box
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask: url(/assets/png/HappyFace.png) fill-box;
padding: 10px;
}
</style>
</head>
<body>
<div>
fill-box
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
mask-origin | margin-box
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask: url(/assets/png/HappyFace.png) margin-box;
padding: 10px;
}
</style>
</head>
<body>
<div>
margin-box
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
mask-origin | padding-box
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask: url(/assets/png/HappyFace.png) padding-box;
padding: 10px;
}
</style>
</head>
<body>
<div>
padding-box
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
mask-origin | stroke-box
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask: url(/assets/png/HappyFace.png) stroke-box;
padding: 10px;
}
</style>
</head>
<body>
<div>
stroke-box
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
mask-origin | view-box
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask: url(/assets/png/HappyFace.png) view-box;
padding: 10px;
}
</style>
</head>
<body>
<div>
view-box
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
mask-position | bottom
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) bottom no-repeat;
}
</style>
</head>
<body>
<div>bottom</div>
</body>
</html>
mask-position | center
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) center no-repeat;
}
</style>
</head>
<body>
<div>center</div>
</body>
</html>
mask-position | left
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) left no-repeat;
}
</style>
</head>
<body>
<div>left</div>
</body>
</html>
mask-position | length
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) 100px 100px no-repeat;
}
</style>
</head>
<body>
<div>length</div>
</body>
</html>
mask-position | percentage
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) 100% 100% no-repeat;
}
</style>
</head>
<body>
<div>percentage</div>
</body>
</html>
mask-position | right
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) right no-repeat;
}
</style>
</head>
<body>
<div>right</div>
</body>
</html>
mask-position | top
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) top no-repeat;
}
</style>
</head>
<body>
<div>top</div>
</body>
</html>
mask-repeat | no-repeat
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) no-repeat;
}
</style>
</head>
<body>
<div>no-repeat</div>
</body>
</html>
mask-repeat | repeat
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) repeat;
}
</style>
</head>
<body>
<div>repeat</div>
</body>
</html>
mask-repeat | repeat-x
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) repeat-x;
}
</style>
</head>
<body>
<div>repeat-x</div>
</body>
</html>
mask-repeat | repeat-y
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) repeat-y;
}
</style>
</head>
<body>
<div>repeat-y</div>
</body>
</html>
mask-repeat | round
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) round;
}
</style>
</head>
<body>
<div>round</div>
</body>
</html>
mask-repeat | space
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) space;
}
</style>
</head>
<body>
<div>space</div>
</body>
</html>
mask-size | auto
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) 0% 0% / auto;
}
</style>
</head>
<body>
<div>auto</div>
</body>
</html>
mask-size | contain
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) 0% 0% / contain;
}
</style>
</head>
<body>
<div>contain</div>
</body>
</html>
mask-size | cover
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) 0% 0% / cover;
}
</style>
</head>
<body>
<div>cover</div>
</body>
</html>
mask-size | length
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) 0% 0% / 25px 50px;
}
</style>
</head>
<body>
<div>length</div>
</body>
</html>
mask-size | percentage
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask: url(/assets/png/HappyFace.png) 0% 0% / 25% 50%;
}
</style>
</head>
<body>
<div>percentage</div>
</body>
</html>
JS | mask-clip
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask-image: url(/assets/png/HappyFace.png);
mask-origin: margin-box;
padding: 10px;
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("div")[0].style.mask = "url(/assets/png/HappyFace.png) margin-box " + value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="border-box">
<input onmouseover="mouseover(value)" type="button" value="content-box">
<input onmouseover="mouseover(value)" type="button" value="fill-box">
<input onmouseover="mouseover(value)" type="button" value="margin-box">
<input onmouseover="mouseover(value)" type="button" value="no-clip">
<input onmouseover="mouseover(value)" type="button" value="padding-box">
<input onmouseover="mouseover(value)" type="button" value="stroke-box">
<input onmouseover="mouseover(value)" type="button" value="view-box">
<div>
mask-clip
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
JS | mask-composite
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask-image: url(/assets/png/HappyFace.png), url(/assets/png/Star.png);
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("div")[0].style.mask = "url(/assets/png/HappyFace.png) " + value + ", url(/assets/png/Star.png)";
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="add">
<input onmouseover="mouseover(value)" type="button" value="exclude">
<input onmouseover="mouseover(value)" type="button" value="intersect">
<input onmouseover="mouseover(value)" type="button" value="subtract">
<div>mask</div>
</body>
</html>
JS | mask-image
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("div")[0].style.mask = value;
}
</script>
</head>
<body>
<button onmouseover="mouseover(value)" value="linear-gradient(black, transparent)">linear-gradient</button>
<button onmouseover="mouseover(value)" value="radial-gradient(black, transparent)">radial-gradient</button>
<button onmouseover="mouseover(value)" value="url(/assets/png/HappyFace.png)">url</button>
<input onmouseover="mouseover(value)" type="button" value="none">
<div>mask-image</div>
</body>
</html>
JS | mask-mode
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
mask-image: url(#myid);
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("div")[0].style.mask = "url(#myid) " + value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="alpha">
<input onmouseover="mouseover(value)" type="button" value="luminance">
<input onmouseover="mouseover(value)" type="button" value="match-source">
<div>mask-mode</div>
<svg>
<mask id="myid" style="mask-type: alpha">
<rect fill="red" height="100" width="100"/>
</mask>
</svg>
</body>
</html>
JS | mask-origin
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
border-style: solid;
border-width: 10px;
margin: 10px;
mask-image: url(/assets/png/HappyFace.png);
padding: 10px;
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("div")[0].style.mask = "url(/assets/png/HappyFace.png) " + value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="border-box">
<input onmouseover="mouseover(value)" type="button" value="content-box">
<input onmouseover="mouseover(value)" type="button" value="fill-box">
<input onmouseover="mouseover(value)" type="button" value="margin-box">
<input onmouseover="mouseover(value)" type="button" value="padding-box">
<input onmouseover="mouseover(value)" type="button" value="stroke-box">
<input onmouseover="mouseover(value)" type="button" value="view-box">
<div>
mask-origin
<svg height="100" width="100" viewBox="0 0 100 100">
<g stroke="black" stroke-width="10">
<rect fill="yellow" height="100" width="100"/>
</g>
</svg>
</div>
</body>
</html>
JS | mask-position
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask-image: url(/assets/png/HappyFace.png);
mask-repeat: no-repeat;
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("div")[0].style.mask = "url(/assets/png/HappyFace.png) " + value + " no-repeat";
}
</script>
</head>
<body>
<button onmouseover="mouseover(value)" value="0% 0%">initial</button>
<input onmouseover="mouseover(value)" type="button" value="bottom">
<input onmouseover="mouseover(value)" type="button" value="center">
<input onmouseover="mouseover(value)" type="button" value="left">
<button onmouseover="mouseover(value)" value="100px 100px">length</button>
<button onmouseover="mouseover(value)" value="100% 100%">position</button>
<input onmouseover="mouseover(value)" type="button" value="right">
<input onmouseover="mouseover(value)" type="button" value="top">
<div>mask-position</div>
</body>
</html>
JS | mask-repeat
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask-image: url(/assets/png/HappyFace.png);
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("div")[0].style.mask = "url(/assets/png/HappyFace.png) " + value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="no-repeat">
<input onmouseover="mouseover(value)" type="button" value="repeat">
<input onmouseover="mouseover(value)" type="button" value="repeat-x">
<input onmouseover="mouseover(value)" type="button" value="repeat-y">
<input onmouseover="mouseover(value)" type="button" value="round">
<input onmouseover="mouseover(value)" type="button" value="space">
<div>mask-repeat</div>
</body>
</html>
JS | mask-size
<!doctype html>
<html>
<head>
<style>
div {
background-color: yellow;
height: 100%;
mask-image: url(/assets/png/HappyFace.png);
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("div")[0].style.mask = "url(/assets/png/HappyFace.png) 0% 0% / " + value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="auto">
<input onmouseover="mouseover(value)" type="button" value="contain">
<input onmouseover="mouseover(value)" type="button" value="cover">
<button onmouseover="mouseover(value)" value="25px 50px">length</button>
<button onmouseover="mouseover(value)" value="25% 50%">percentage</button>
<div>mask-size</div>
</body>
</html>
Internal
External