Questions tagged [css-mask]
The mask CSS property hides an element (partially or fully) by masking or clipping the image at specific points.
css-mask
98
questions
0
votes
2
answers
61
views
Masking a part of a border
Is it possible to make a div border masked in a specific place like in the picture above?
Some kind of div masks another div without setting a background-color (because the background of a whole site ...
- 11
0
votes
0
answers
20
views
CSS fade works in emulation on desktop, not on actual mobile device
I have created the following mask and tested it by means of the desktop browser's mobile device emulation (from the Developer Tools in Firefox):
.Main
{
position: fixed;
width: ...
- 3,722
1
vote
1
answer
46
views
Creating a wavy border on all sides using CSS
Using this generator I can create the wavy border I'm after on either the top and bottom or left and right, but I'm having trouble combining these masks to create a wavy border all the way around.
Top ...
- 1,940
1
vote
1
answer
54
views
Circle cut out with fully transparent border?
I am working on a project that has a contact-us button. This button requires a status indication. I've read the following article that shows a status indication on a avatar image. The cool thing about ...
- 23
0
votes
1
answer
41
views
CSS Gradients Rendering Incorrectly in Browser?
I'm doing some custom coding in Squarespace. I am having a strange thing happen that I've never seen before. I am trying to add a hard-stop gradient mask to a div (textbox) so that I can create a wavy ...
- 29
0
votes
1
answer
77
views
Clip/mask (remove) top-right image corner with SVG
Is there a (Cross browser (no IE)) way to clip the top right corner of an dynamically sized image with this svg? In the worst case, I can use a fixed aspect ratio, but I prefer it to be as flexible as ...
- 13
0
votes
0
answers
12
views
CSS mask vs. background unexpected ordering [duplicate]
I have observed there is a significant difference in ordering when using CSS background-* vs. mask-*. Here is an example:
<style>
.cover {
position: absolute;
left: 30px;
top: 0;
...
- 870
1
vote
1
answer
47
views
Achieving a smooth blending of gradient in the foreground into the background
I am attempting to create a pure CSS-generated rainbow gradient overlay on top of an underlying background. The goal is to have the rainbow fully opaque at the center and gradually fade to fully ...
- 290
0
votes
1
answer
88
views
Use canvas as background for overlaying elements using mask
I have a full-screen background canvas, I want to draw elements on top of that canvas that act as a mask. So the canvas should only be visible through the overlaying elements.
Here's a picture on what ...
- 501
3
votes
3
answers
166
views
mask cuts out border. Is there anyway to force border to div's shape once it is masked?
So I'm trying to create a responsive frame with inverted corners for my website. I achieved to create the shape of it but once I try to add border to it, -webkit-mask cuts it out. Is there any way to ...
- 31
1
vote
1
answer
76
views
How to Create a Multiple Semi-circle on The Right Side with CSS
How to create multiple half/semi-circle on one side only (check my image below)?
My expected result:
The result:
The code I have tried:
.ticket {
display: inline-block;
width: 500px;
...
- 556
2
votes
1
answer
67
views
Is it possible to combine a linear-gradient and a radial-gradient in mask-image in CSS?
I'm trying to create the following shape:
using the CSS -webkit-mask-image: property. What I have is:
body {
background-image: url("https://picsum.photos/500");
background-size: cover;
...
- 865
1
vote
1
answer
333
views
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 ...
- 11
1
vote
1
answer
98
views
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 ...
- 163
2
votes
2
answers
291
views
How to mask div boxes with multiple shapes in css only?
I'm a novice in coding and I'm trying to figure out how to mask div boxes with multiple circles along the edge on certain positions to get something like this in the picture. The website is www....
1
vote
0
answers
166
views
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 ...
0
votes
2
answers
251
views
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-...
2
votes
1
answer
672
views
How would I go about clipping or masking an element by the shape of an SVG?
I have a multipath SVG that I would like to use to clip a CSS element. How would I go about making it so that the only part of the element I see is within the SVG? In other words, how would I make it ...
- 61
1
vote
2
answers
641
views
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 ...
- 179
1
vote
1
answer
1k
views
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:
...
1
vote
1
answer
187
views
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 ...
- 33
1
vote
0
answers
209
views
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 ...
- 11
0
votes
1
answer
235
views
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: url(https://wp.agriturismo-...
- 141
0
votes
2
answers
519
views
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 {
...
- 244
0
votes
2
answers
937
views
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 {
...
- 25
1
vote
1
answer
3k
views
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 ...
- 99
2
votes
0
answers
99
views
Display only intersecting elements in CSS [closed]
Is there a CSS way to display only intersecting elements on the screen?
Take a look at this layout, it has 4 pseudo-elements, white semi-transparent circles located in the top corners of each square. ...
- 2,469
0
votes
1
answer
2k
views
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.
<!DOCTYPE html&...
- 71
0
votes
1
answer
980
views
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 ...
- 533
2
votes
1
answer
390
views
How can I make a single run-of-text outlined in some areas and a solid-fill in other areas?
I recently came across this dribbble/landing page concept with hollow/filled text.
First off I'm not entirely sure if this concept could be recreated in CSS.
A bit of Google did lead me to CSS text ...
- 27
3
votes
1
answer
390
views
Adding an outer gradient border or overlay shape to a circular image using CSS
I'm attempting to add an outer gradient border of three solid colors (Fig B) to an image (Fig A) using CSS, but am not having much luck with the methods I've tried thus far. The images will have ...
- 129
0
votes
0
answers
138
views
how to create a masking or clipping gradient effect for my background-image?
what I am trying to do is, mask/clip a gradient on my background-image. Below image is the expected result
but the actual result is the image below. The gradient just cover my entire background image....
- 523
1
vote
0
answers
150
views
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 ...
0
votes
0
answers
30
views
Any way to replicate -webkit-mask-composite: destination-atop in Chrome and/or Firefox? [duplicate]
My goal is to be able to use a PNG alpha mask to create a "jagged edge" along the bottom of sections/row/containers on a website.
Because the rows can be of any height, I need to be able to ...
- 27
0
votes
1
answer
189
views
5 Second Wait between webkit mask position animation using javascript
I'm working on a CSS shining effects on the icons so far I have created the effect using webkit mask below is my snippet
.hm-instagram:before{
color: #0ED8F6;
-webkit-mask-image: linear-gradient(-...
- 1
1
vote
1
answer
2k
views
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/...
- 27
7
votes
1
answer
4k
views
mask-size: 100% 100% does not stretch horizontally
I'm applying an SVG image mask to create a frame around and image like this:
img {
mask-repeat: no-repeat;
mask-size: 100% 100%;
mask-image: url('i/test-...
- 232
1
vote
1
answer
247
views
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 ...
- 25
0
votes
1
answer
908
views
How can I make a child div appear above a css mask in parent div
I've applied an svg mask to an mp4 video created using the Gutenberg cover block. The problem is that the wp-block-cover__inner-container text is also masked by the svg but needs to appear above it.
I'...
- 3
0
votes
1
answer
312
views
CSS mask and clip-path both obstruct other elements in on the page in Safari
I have a project where I need to use both clip-path and masks in order to get some sort of gradient coloring onto a div. I use the clip-path and mask to contain the colors within the borders of the ...
- 1,133
2
votes
1
answer
6k
views
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 ...
- 207
1
vote
1
answer
4k
views
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 ...
- 1,133
2
votes
1
answer
1k
views
How to have a shadow inside a CSS mask?
Can I have a shadow inside a cutout made by an SVG mask?
Here is the code that I'm working with
index.html
<div class="content">
<section id="home-section">
<...
- 109
1
vote
1
answer
658
views
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 ...
- 1,133
3
votes
2
answers
362
views
I can't frame this image inside an SVG
I want to wrap this
inside
to achive a result similar to
(source: i.ibb.co)
it is to say, the t-shirt should be cropped inside the cloud, following its path.
I tried to use a CSS border mask, but I ...
- 43
2
votes
2
answers
2k
views
Use an image as a mask for another image
I'm making a website that I wanted to be a white page that you could stamp to make another image appear under. So when you click, you make a holepunch.
Like this exemple :
So I managed to have a ...
- 736
1
vote
1
answer
213
views
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 ...
- 13
2
votes
1
answer
397
views
Custom bottom border on div using mask
Hi i want effect like this on my div but only at the bottom:
What im doing right now is this:
.container {
width: 500px;
height: 150px;
background: #FDCA40;
}
.box {
width: 100%;
...
- 134
-1
votes
2
answers
293
views
Custom top border on div only at the top ot using mask
Hi i want effect like this on my div but only at the top:
I know there is css mask property but it's really complicated to me.
My solution is I created single circle svg and repeat it multiple times ...
- 134
4
votes
1
answer
1k
views
Applying mask to box-shadow
I have a div with a mask applied to it. I noticed that I can't apply a box-shadow on that same div, so I must move the shadow to a "wrapper" div.
The problem is that if the shadow is placed ...
- 14.9k