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
0 answers

Css mask parallax effect

I have applied a mask to an image and want the mask to move faster than the image, when scrolling. Since the mask isnt an individual element i cant apply a parallax effect to the mask, even though I would think thats exactly what I would need here,…
Straightnun
  • 11
  • 1
1
vote
1 answer

Can't get through CSS masking

I'm trying to use CSS masking but can't figure out why is not working with this png. Codepen div { width: 100%; height: 500px; background-color: red; mask-image:…
GGKMNTN
  • 87
  • 9
1
vote
1 answer

CSS mask-image gradient on left side, and bottom

What I want to do is fade only left side of the image, and the whole bottom. Currently I have: mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, transparent 100%); Which works perfectly for the left side of the image, but how can I apply…
hj.paul7
  • 89
  • 1
  • 7
1
vote
1 answer

Add two masks to an image

I'm trying to display an image with two svg masks on it. I've tried a few different ways but can't seem to get it right. Here is a crude image to illustrate what I want: The image is the black square, and the masks are in red. I've tried adding…
RRhodes
  • 501
  • 6
  • 19
1
vote
0 answers

CSS mask trick to design the tshirt with drag and resizable feature

I am trying to build react components to design a product dynamically where user can choose the product like tshirt, mug, jacket etc. and choose the image to print on that product base. At first I am trying to achieve image mask on the product base.…
Sunil Shrestha
  • 63
  • 5
1
vote
1 answer

How to position SVG clip-path using CSS and only clip one edge of clipped element

I am trying to use an SVG mask and the CSS clip-path property to make some "ragged" section dividers on a website. I need to be able to apply ese "ragged" bottom edges to sections/rows of any height, and so I need to be able to position and…
dubyaD
  • 29
  • 1
  • 4
1
vote
1 answer

Is there a way to change the opacity of my text from the center in CSS?

I am currently wondering if this is possible to change the opacity of my text in CSS... but from the center, like if I could give a point (Like 50% of my width) and make the opacity at 0 at this precise point, and increase it as we are getting away…
Benjamin
  • 25
  • 6
1
vote
1 answer

CSS: Inverting what area is hidden by SVG's mask-property

I have an SVG and using a mask with a background color to show the SVG, Is there any property that i can use to invert the mask? eg. Normally the SVG-mask will hide anything that isn't already behind the SVG-content, How can I have that happen the…
guynumerouno
  • 157
  • 3
  • 14
1
vote
1 answer

CSS mask/-webkit-mask not working in safari

I have a project where I try to draw a circle with a gradient border. I have made it so it works in Chrome. But the styling doesn't work in safari. I don't know why it wouldn't work. I have added a mask: version for safari. .gradient-circle { …
Stephen
  • 913
  • 3
  • 24
  • 50
1
vote
1 answer

css gradient border with transparency

I have this project where I need to draw a circle. I try to do this with a div which I give a border that draws a linear-gradiant. But this border also needs to be transparent. But I can't seem to get it to work. I get the gradient to work. But I…
Stephen
  • 913
  • 3
  • 24
  • 50
1
vote
1 answer

CSS mask-image overlaps scrollbar

I am working on a global fading behavior. General content that is located in a scrollable area (whether text or other content). Since the background of the individual areas is not always the same, I was looking for a solution that simply lets the…
Adrian
  • 13
  • 2
1
vote
1 answer

How to use a CSS mask with an image?

I am trying to put gradient mask on image but it's not working
Bg-pic
.bg-pic{ width:100%; mask-image:linear-gradient(180deg, #000000…
Vardan Hambardzumyan
  • 416
  • 2
  • 11
1
vote
2 answers

How to make inline SVG Mask Responsive?

So for the past few days I'm trying to use SVG for the first time. I have being trying to make a responsive mask, with no success. I know there is a lot of questions and answers about this, but none seems to work in my case. Could someone give me…
Francisco Costa
  • 379
  • 1
  • 3
  • 22
1
vote
1 answer

CSS: browser compatibility issues using 'background-clip: text' and linear-gradient

I am attempting to create a faded text effect on scroll where the text at the top and bottom of the element are transparent but the text in the center remains fully opaque. There is also infinitely scrolling text over a video background. Because it…
Joel Hoelting
  • 1,862
  • 2
  • 23
  • 45
1
vote
1 answer

Chrome not rendering CSS mask-image consistently

I've run into a strange issue where chrome isn't applying some images consistently with masks. (one image works as expected, whereas the other does not and renders the entire div). Both images work as expected in Firefox (when the webkit prefix is…
Joel
  • 382
  • 1
  • 3
  • 19
1 2 3
4
5 6