Stack Overflow
Stack Overflow

Questions tagged [css-mask]

The mask CSS property hides an element (partially or fully) by masking or clipping the image at specific points.

The effect of applying a mask to a graphical object is as if the graphical object will be painted onto the background through a mask, thus completely or partially masking out parts of the graphical object.

Reference: https://drafts.fxtf.org/css-masking-1/#masking

87 questions
1
vote
1 answer

Make Div fit to mask size

Is it possible to make the
fit it's css mask size? So say the mask image is 100px x 100px. Is it possible to make the
automatically 100px x 100px big? (not by putting style="width: 100px; height: 100px" on the div) I am looking for…
Freddy Bonda
  • 1,189
  • 6
  • 15
  • 33
1
vote
0 answers

SVG mask-image not displaying in Firefox and Edge

I have a problem with displaying svg as mask-image in the an older version of Firefox (52.8.1) and Microsoft Edge (40.15063.674.0). In this version Firefox I am getting an error incorrect property value. And the svg look like squares and rectangles…
Dariusz
  • 193
  • 1
  • 12
1
vote
1 answer

CSS Vertical Scrolling Marquee with Gradient Mask

I am trying to create a vertically scrolling marquee over a full bleed background. The scrolling text will be contained at the center of the page, and must pass behind a gradient opacity mask at the top and bottom. I can apply the gradient mask at…
paulcook
  • 49
  • 2
  • 11
1
vote
0 answers

Print element with webkit-mask-box-image style

I want to print (in browser) a div with 2 pictures on it. One div (#pic1) has a background-image of a lion, the other div (#pic2) is the same picture, but styled with "-webkit-mask-box-image" and a background-color (kind of color overlay in…
Jasper Poppe
  • 481
  • 2
  • 7
  • 16
1
vote
3 answers

Dynamic masking with css

I would like to have a mask that's fading out 16px from both sides. So like: 16px fading in - white - 16px fading out. What I got is this: DEMO -webkit-mask-image: linear-gradient(to right, transparent, white), linear-gradient(to left, transparent,…
Rane
  • 255
  • 1
  • 6
  • 17
1
vote
2 answers

Clip-path/web-kit-mask works when SVG is seperate file, but not when inline

I am using the following implementation to mask an element using an SVG and some CSS. //styles.css .elementToBeMasked { width: 100%; height: 100%; position: absolute; z-index: 1; display: block; overflow: hidden; …
Sam Quayle
  • 537
  • 5
  • 16
0
votes
2 answers

How to use radial-gradient inside an -webkit-mask to make 3 transparent holes but keeping image

I'm working on a project where I need to make a div that must have 3 random holes on the borders, making them transparent. The issue I'm facing is, to 2 holes i'm using -webkit-mask with radial-gradient to create 2 transparent holes of 20px. My…
Ricardo Pagano
  • 5
  • 2
0
votes
0 answers

How to save an HTML element with filters to an image

So I'm making a web editor, and to shape objects I use this CSS property: -webkit-mask-image. After that, I need to save it as an image (png or jpeg doesn't matter yet). For this I am using html2canvas. But here's the problem, when saving the image,…
Reims
  • 11
  • 1
  • 1
0
votes
2 answers

Text on Top of CSS Gradient

I have the following code with various gradients, which uses -webkit-mask. I want to be able to add some text on top of the gradient (where I have TEXT). Here is the current code: .test { background: radial-gradient(120% 120%, red 30%, #000); …
helpmepie
  • 244
  • 1
  • 6
  • 19
0
votes
2 answers

Use a dynamically expanding div as clipping mask for background image in parent

I'm looking for a CSS solution that adapts to div contents, with the functionality of clip-path but dynamic. This is my code: .background { background: yellow; text-align: center; } .text { display: inline-block; margin: 20px; padding:…
Chris Conta
  • 25
  • 2
0
votes
1 answer

Making a css animation using a transparent gradient mask

I am currently making an animation that will apply a gradient mask on an image. The mask is a transparent mask and it will transform from right to left of the image. Here is my code.