Mask Image

Specifies an image to use as a mask.

Usage:

@mask img-*;

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.

info

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

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

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

export default shilpConfig;

Published at: Apr 20, 2026

Last updated at: Jun 15, 2026

gradient mode