---
title: "Mask Image | @mask"
description: "Specifies an image to use as a mask."
keywords: ["mask", "image", "mask-image", "url"]
---

# Mask Image

Specifies an image to use as a mask.

Usage:

- `@mask img-*;`

<Alert variant="danger">

Gradient color mask uses `mask-image` property.

So, if you are using `@mask gradient-*;` then conflict will be created. You need
to choose a stratagey to work with both.

</Alert>

<Alert variant="info">

This page contains only the **property configuration reference**. Complete
documentation and usage examples will be added progressively in future updates.

</Alert>

---

<section>

## Reference

```js title="shilp.config.js"
const shilpConfig = {
	source: "react",

	properties: {
		mask: {
			img: {
				property: "mask-image: <v><i>;",
				values: {
					none: "none",
				},
			},
		},
	},
};

export default shilpConfig;
```

</section>