Member Avatar for Siberian

I've been trying to get CSS-Mask to work. I've tried PNG(24/32),SVG & GIF with no results ?

 background-image:url("/wdp/images/grid.png");
 -webkit-mask:url("/wdp/images/x320svg-mask.svg") top alpha;
  • 2 Contributors
  • 3 Replies
  • 93 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

— pointed to the right place, but the Chrome error you saw usually means the value you gave the image property included tokens it does not accept. In Blink/WebKit the image property expects just an image reference. Position, repeat, size and the mask "mode" must be set with the matching longhand properties or with the proper shorthand. Also confirm the mask image actually contains transparency (alpha) and that it loads without cross‑origin blocking.

Example (use different file names than your test files):

.box {
  -webkit-mask-image: url('mask-sample.png');
  -webkit-mask-position: top center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url('mask-sample.png');
  mask-mode: alpha;
}

.box.alt {
  -webkit-mask: url('mask-sample.png') top center / contain no-repeat;
  mask: url('mask-sample.png') top center / contain no-repeat;
}

Troubleshooting checklist:

  • Verify the mask file actually has an alpha channel (PNG‑32 or an SVG with transparent shapes). A fully opaque PNG will produce no visible masking.
  • For external SVGs, either reference a mask element by fragment id or ensure the SVG content provides the intended transparency; some browsers treat plain SVG files differently when used as masks.
  • Check the Network panel to confirm the mask resource loads with 200 and is same‑origin or served with CORS headers if hosted elsewhere.
  • Use devtools to inspect the computed -webkit-mask* values and watch the console for CSS parser errors.

References: MDN mask overview (mask) and cross‑browser notes (Can I use: CSS masks). For historical WebKit behavior see the WebKit blog on masks ().

Recommended Answers

All 3 Replies

Member Avatar for gentlemedia

It should be -webkit-mask-image.

Member Avatar for Siberian

I've tried mask-image, doesn't work, the latest version of Chrome give me a invalid property value;

 -webkit-mask-image: url("/wdp/wip/x32024.png") top alpha;
Member Avatar for gentlemedia

Can you post your page online somewhere?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.