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
2
votes
1 answer

How do I apply a proper gradient alpha mask with CSS (over text)?

I'm creating a website on my own using html+css and jquery. Recently started using SASS that comes with Autoprefixe just so I can get some formatting done more easily and be able to use sass libraries down the line. I'm trying to apply a gradient…
Paris Laras
  • 31
  • 1
  • 1
  • 7
2
votes
0 answers

Image mask in css not working with local file

I am trying to mask an image using CSS and the WebKit property ( -webkit-mask-image ) . But due to some reason, the mask doesn't work when I use it from local files on my PC or even when I upload it to a website of mine and use the link. If I use…
Adnan Farooqui
  • 53
  • 1
  • 7
2
votes
1 answer

Blur a single side of an image

How can I blur one side of an image to create a nice transition from the image to a background? I was able to do it with this little hack: .wrapper { width: 200px; height: 250px; overflow: hidden; } .image-blurred { …
Steven
  • 167
  • 8
2
votes
1 answer

Negative mask in CSS within the background image

I want to create a mask in css using png file but in a different way. Basically I don't want the mask to display the content underneath but I want it to CUT the content underneath and display everything else. So like negative mask. The important…
Piotr Ciszewski
  • 1,691
  • 4
  • 30
  • 53
2
votes
2 answers

How to make a rectangular transparency gradient CSS3?

I am trying to make in CSS3 rectangular gradient like done with older: filter: alpha(opacity=65, style=3) Unfortunately mask-image property (which i used in order to achieve elliptic ones) does not have rectangular-gradient option. ( pre CSS3…
SkillGG
  • 647
  • 4
  • 18
2
votes
2 answers

How to set width and height of mask-image in css?

I have a div with image using -webkit-mask-image CSS but i can't set width and height for this -webkit-mask-image like css background image... .img { background-color: gray; width: 40px; height: 60px; } .img { -webkit-mask-image:…
mans
  • 1,087
  • 4
  • 26
  • 44
2
votes
5 answers

Dragging one image makes other image to drag

When i drag the right part of uploaded image in mask1 , than uploaded image in mask2 is dragging, but that should't happen.... Here is video link Also if i upload image only in mask 1 and try to drag, the image will disappear , but if i upload…
user8444404
2
votes
1 answer

Is there a CSS3 filter to turn colors with gradients into solid colors

I have a special case in which I use a -webkit-mask with a radial-gradient to create little dots on a background picture. The color of these dots is transparent so that the background picture can be seen within the dots. Now there is the case that…
Benny Code
  • 51,456
  • 28
  • 233
  • 198
2
votes
1 answer

CSS3 inverted/reverse rounded corner for a tooltip

I'm trying to create a tooltip that looks like this using CSS: This is how i'm trying to solve it: http://jsfiddle.net/NXLuZ/ So, basically i'm using css3 masking: div:after { width: 61px; height: 10px; background: #fff; …
passatgt
  • 4,234
  • 4
  • 40
  • 54
1
vote
1 answer

CSS mask and mask-composite doesn't work in Safari 14

http://hisidi.kr/2023/100/ In this website, I masked circular shaped space at the top and bottom of the screen by using mask and mask-composite. But in Safari 14, it doesn't work properly(maybe because mask-composite is not supported in this…
penguin
  • 11
  • 1
1
vote
1 answer

How can I animate cutting an element with CSS?

I'm trying to animate an element being cut like this but I can't figure out how to do it. I tried doing it with transparent gradient mask and shifting the position, but I couldn't make the element visible fully, only either bottom or top half of…
let
  • 153
  • 1
  • 2
  • 8
1
vote
0 answers

Is there a replacement for -webkit-mask-attachment?

So far as I can tell, the non-standard -webkit-mask-attachment CSS property was used to control how CSS masks attach to an element in the same way that the existent background-attachment property works on backgrounds. This seems exactly like what I…
little dutch boy
  • 11
  • 3
1
vote
2 answers

Masking with black and white images – SVG alternatives (Safari performace issues)

I am working on a web project where I display dynamically rendered items which I would like to display in a very specific way: They should be masked with a black and white image and then be applied an SVG filter. The mask images are highly…
kaktus
  • 169
  • 1
  • 1
  • 11
1
vote
1 answer

Ripped paper effect with css mask

I try to achieve some ripped/lined paper effect with css mask. It works actually pretty fine and looks good. What i can't achieve is if i also want the mask at the top. So here is what i tried so far: mask-image: linear-gradient(white, white),…
Alexander Galler
  • 53
  • 4
1
vote
1 answer

html canvas - multiple svg images which all have different fillStyle colors

For a digital artwork I'm generating a canvas element in Vue which draws from an array of multiple images. The images can be split in two categories: SVG (comes with a fill-color) PNG (just needs to be drawn as a regular image) I came up with…
Jore D
  • 33
  • 3
1 2
3
4 5 6