Kevin Powell - Community•2y ago

Masking

I am trying to mask an svg with a solid color. I know I can only mask with a gradient or an image. Is there another option to mask with a solid color?

29 Replies

Mannix•2y ago

you can always set gradient as solid color 😄

capt_uhu•2y ago

i'd need some more specific info about what you're trying to do to help here. Can you throw what you have in a codepen?

Spiritual TechOP•2y ago

That doesn't work

MarkBoots•2y ago

-webkit-mask-image: linear-gradient(black, transparent)
mask-image: linear-gradient(black, transparent)

-webkit-mask-image: linear-gradient(black, transparent)
mask-image: linear-gradient(black, transparent)

should work as mask

Spiritual TechOP•2y ago

Oh, I see

MarkBoots•2y ago

so, just repeat the same 2 times and it is solid

Spiritual TechOP•2y ago

What do you mean?

MarkBoots•2y ago

black, transparent is a gradient

Mannix•2y ago

black, black instead of black, transparent

Spiritual TechOP•2y ago

MarkBoots•2y ago

black is visable, transparent is masked

Spiritual TechOP•2y ago

The color isn't showing up. I made it blue and it is still black.

MarkBoots•2y ago

youll have to show an example if it doesnt work as expected

Spiritual TechOP•2y ago

How do I ad a code block to this chat?

MarkBoots•2y ago

codepen is the easiest, then we can see it live https://codepen.io

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

Mannix•2y ago

you want to set an background on the element and use the svg as the mask 😉

MarkBoots•2y ago

ohw, that's something totaly diff

Mannix•2y ago

MarkBoots•2y ago

mask a color with a svg, not mask a svg with a color

Spiritual TechOP•2y ago

That was my understanding and I tried that already. Maybe I did something wrong. How do I set up the css?

Mannix•2y ago

background: blue;
mask-image: url(https://df-cdn.s3.us-east-1.amazonaws.com/DFS_LiveChat/site-logo.svg);
-webkit-mask-image: url(https://df-cdn.s3.us-east-1.amazonaws.com/DFS_LiveChat/site-logo.svg);

background: blue;
mask-image: url(https://df-cdn.s3.us-east-1.amazonaws.com/DFS_LiveChat/site-logo.svg);
-webkit-mask-image: url(https://df-cdn.s3.us-east-1.amazonaws.com/DFS_LiveChat/site-logo.svg);