CSS mask-position property

CSS mask-origin property

Last Updated : 14 Jun, 2024

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 */
mask-origin: Multiple values
/* Or */
mask-origin: Non-standard keyword values
/* Or */
mask-origin: Global values

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

Category	Description
Keyword values	Values like `content-box`, `padding-box`, `margin-box`, `border-box`, `fill-box`, `stroke-box`, `view-box`, etc.
Non-standard keyword values	Values like `padding`, `border`, `content`, etc.
Multiple values	Combinations like `padding-box`, `fill-box`, `view-box`, `border-box`, etc.
Global values	Values like `inherit`, `unset`, `initial`, etc.

Example 1: Below is the example that illustrates the mask-origin property using border-box :

html

<!DOCTYPE html>
<html>

<head>
    <style>
        .geeks {
            width: 22%;
            height: 200px;
            background: green;
            border: 10px solid red;
            padding: 10px;
            color: white;
            -webkit-mask-image:
                url("image.svg");
            -webkit-mask-repeat: repeat;
            mask-origin: border-box;
        }
    </style>
</head>

<body>

    <div class="geeks"></div>

</body>

</html>

Output:

Example 2: Below is the example that illustrates the mask-origin property using content-box :

html

<!DOCTYPE html>
<html>

<head>
    <style>
        .geeks {
            width: 22%;
            height: 200px;
            background: green;
            border: 10px solid red;
            padding: 10px;
            color: white;
            -webkit-mask-image:
                url("image.svg");
            -webkit-mask-repeat: repeat;
            mask-origin: content-box;
        }
    </style>
</head>

<body>

    <div class="geeks"></div>

</body>

</html>

Output:

Browsers Supported:

CSS mask-position property

T

thacker_shahid

Improve

Article Tags :

Similar Reads

CSS mask-position property

The mask-position property sets the mask images within the mask positioning area by using the percentage or keywords values. There are always two values of mask-position (horizontal offset and vertical offset). If only one value is specified then the other one is assumed to be 50% or center. Syntax:

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 margin-top Property

The margin-top property in CSS is used to set the top margin of an element. It sets the margin area on the top of the element. The default value of the margin-top property is 0. Syntax: margin-top: length|auto|initial|inherit;Property values: length: It is used to specify the length of the margin wi

CSS margin-right Property

The margin-right property in CSS is used to set the right margin of an element. It sets the margin area on the right side of the element. Negative values are also allowed. The default value of the margin-right property is zero. Syntax: margin-right: length|auto|initial|inherit;Property Value: length

CSS | margin-block Property

The margin-block property is used to define the logical block end margin of an element. This property helps to place margin depending on the element's writing mode, directionality, and text orientation.Syntax: margin-block-end: length | auto | initial | inherit | unset; Property values: length: Sets

CSS | shape-margin Property

The shape-margin property is used to set the margin of a shape created by the shape-outside property. This margin is used to adjust the space between the edges of the shape and the surrounding content. Syntax: shape-margin: <length> | <percentage> Property Values: length: It is used to s

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-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 isolation Property

The isolation property in CSS defines whether an element should create a new stacking context. It helps prevent the element from being affected by background elements with blending modes by placing it in its stack. This property is typically applied to the parent element, ensuring that its children

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