106 questions
0
votes
2
answers
70
views
SVG masking with static and fixed positioned paths
I have a fixed element at the top of my page, a vector logo. Further down the page, I have a large vector element. They are both the same colour. When the logo passes over the second element, I want ...
0
votes
1
answer
181
views
How to add border to the mask structure?
I am trying to achieve one shape(like below).
I have taken the shape code from https://css-shape.com/inverted-radius/
But, the problem I am facing is with the border, I need to add border to my shape,...
- 107
1
vote
2
answers
117
views
Add border to a shape built using CSS mask
I have an image that has a -webkit-mask applied to it, and I need to apply a border to the resulting shape. Unfortunately, the mask breaks the border. How do I apply a border around the entirety of ...
- 7,829
1
vote
1
answer
155
views
Css mask-image or mask-mode not working in safari
The mask-image or the mask-mode is not working on Safari.
(working version) chrome:
(not working) safari:
The code below is from an answer submitted by user "herrstrietzel" in a previous ...
- 123
0
votes
0
answers
87
views
CSS masking: Using two or more mask for one image or video
this is the code:
<div class="mask1">
<video id="slowMotionVideo" width="700" loop autoplay muted>
<source src="flames-video.mp4" ...
- 143
0
votes
1
answer
107
views
Css SVG mask causes jagged edges
I use SVG for backgroundclipping. It is very nice, except on a very long container. If the container is too long, the edges will become jagged. Is there a reason and solution for this?
It must be a ...
3
votes
2
answers
100
views
How to Mask a DIV with a SVG path
I try to create a HTML/CSS/JS funnel graph, with a simple front-end structure, in order to do so, I place funnel segments as a flex row:
document.addEventListener( 'DOMContentLoaded', function() {
...
- 41
2
votes
0
answers
128
views
How can I get a stepped effect with `mask-mode: luminance`?
I figured that if I have a mask with a black area and a white area, then the pixels corresponding to the black area become transparent, while those corresponding to the white area stay opaque.
Except ...
- 37.6k
2
votes
2
answers
534
views
How to create a smooth inner curve for a block's corner?
I'm trying to create a block with a smooth, curved cut-out in the top-right corner, similar to the image below:
Currently, my implementation looks like this:
As you can see, the current curve is not ...
- 2,179
1
vote
1
answer
69
views
Can I make a consistantly sized corner mask-composite for an image?
I have multiple images that I'd love to have the exact same size of an corner cut-out (like of you were to fold a corner of a page). I've tried using polygon(), but when an image isn't the same ...
- 37
0
votes
2
answers
126
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
1
vote
1
answer
144
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,950
1
vote
1
answer
72
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
59
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
168
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
1
vote
1
answer
123
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
148
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 ...
- 531
3
votes
3
answers
445
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
113
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;
...
- 626
2
votes
1
answer
86
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;
...
- 905
1
vote
1
answer
766
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
156
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
811
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
270
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
1k
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
1k
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
940
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 ...
- 189
1
vote
1
answer
2k
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
214
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
255
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
365
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
623
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
1
vote
2
answers
1k
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 {
...
- 35
1
vote
1
answer
4k
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
153
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
4k
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
1k
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 ...
- 575
2
votes
1
answer
553
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
463
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 ...
- 127
0
votes
0
answers
164
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....
- 511
1
vote
0
answers
160
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
32
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
217
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
8
votes
1
answer
6k
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-...
- 254
1
vote
1
answer
292
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
1k
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
322
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,213
4
votes
1
answer
12k
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 ...
- 237
1
vote
1
answer
5k
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,213