CSS mask-clip property

CSS mask-composite property

Last Updated : 26 Aug, 2022

The mask-composite property defines multiple composite operations to combine multi-mask layers. The first URL layer is at the top and the last URL layer is at the bottom of all the layers.

Syntax:

mask-composite: Keyword values
/* Or */
mask-composite: Global values

Property values: This property accepts values mentioned above and described below:

Keyword values: This property value refers to the values defined with units like add, subtract, intersect, exclude, etc.
Global values: This property value refers to the values defined with units like inherit, initial, unset, etc

Example 1: Below example illustrates the mask-composite property using add :

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 22%;
            height: 200px;
            background: green;
            -webkit-mask-image:
                url("image.svg"),
                url("image2.svg");
            -webkit-mask-size: 140px, 120px;
            -webkit-mask-position: 140px 60px, 50px;
            -webkit-mask-repeat: no-repeat;
            mask-composite: add;
        }
    </style>
</head>
<body>
    <div class="geeks"></div>
</body>
</html>

Output:

Example 2: Below example illustrates the mask-composite property using subtract :

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .geeks {
            width: 22%;
            height: 200px;
            background: green;
            -webkit-mask-image:
                url("image.svg"),
                url("image2.svg");
            -webkit-mask-size: 140px, 120px;
            -webkit-mask-position: 140px 60px, 50px;
            -webkit-mask-repeat: no-repeat;
            mask-composite: subtract;
        }
    </style>
</head>
<body>
    <div class="geeks"></div>
</body>
</html>

Output:

Browsers Supported:

Firefox 53
Safari 15.4

CSS mask-clip property

T

thacker_shahid

Improve

Article Tags :

Similar Reads

CSS mask-clip property

The mask-clip CSS property specifies the area which is affected by the mask. Syntax: mask-clip: geometry-box values /* Or */ mask-clip: Keyword values /* Or */ mask-clip: Non-standard keyword values /* Or */ mask-clip: Multiple values /* Or */ mask-clip: Global values Property values: This property

CSS mask-image Property

The mask-image property in CSS is used to set the mask of an image or a text. It is used to form a mask layer for a particular element in CSS. Syntax: mask-image: none | <mask-source>none: No mask layer is set and a transparent black layer is set. Syntax: mask-image: noneExample: In this examp

CSS Masking Property

CSS Masking property is used to set the mask of an image. It creates a mask layer for the specified elements in CSS. The table below shows CSS masking properties along with syntax and their description. With CSS masking, you can use a mask to cover parts of an element and make them partially or comp

CSS cross-fade Property

The cross-fade property is used to form a kind of blend between two given images. In simple words, it is used to mix to images into one another in terms of percentage. Syntax: cross-fade( <image, <image>, <percentage> ) Property value: It has no property values, instead, it takes two

CSS content Property

The content property is used with the ::before and ::after pseudo-elements, to insert generated content. It allows insertion of text, images, or HTML elements, enhancing design without altering the original HTML structure, thereby providing flexibility in styling and layout. Syntax: content: normal|

CSS mask-size property

CSS mask-size property sets the size of the mask image on the mask painting area. The mask-size property in CSS is used to specify the size of the mask image applied to an element using CSS masking. It determines the width and height of the mask image, allowing for precise control over its dimension

CSS border-image Property

The border-image property in CSS is used to set the border of an element.Â Syntax: border-image: source slice width outset repeat|initial|inherit;The border-image property is the combination of many properties which are listed below: border-image-sourceborder-image-sliceborder-image-widthborder-imag

CSS clip-path Property

The clip-path property of CSS is used to clip the particular section of the image such that part of the image inside the section is shown and part of the image outside the section is not shown. and the CSS clip-path property allows you to create custom clipping paths to define the visible portion of

CSS clip Property

The clip property specifies defining what portion of an absolutely positioned element you want to make visible. Except for the specified region, the rest all other the regions are hidden. The clip property is only applicable to the absolutely positioned element ie., the element having the position:

CSS mask-origin property

The CSS mask-origin property determines the positioning reference of a CSS mask image applied to an element using mask-image. It defines where the mask image originates within the element's box model, influencing how the mask is positioned and clipped. Syntax: mask-origin: Keyword values /* Or */ ma