CSS Brush Stroke Mask or clip path

HTML & CSS
1

I’m trying to think what the best way to create a broke stroke effect to mask the top or bottom of an image or section. Not sure if a clip path could be used, or maybe an SVG? I know I could do this with an image mask, but I was trying to find a cleaner way.

here is a codepen I created using an image positioned absolute over the hero image. I’m looking for a way to make this a class I can apply to any similar sections that has either a background color, image or even able to apply over full with images like the section below.

2

Maybe this is of some help.

You could create two background svgs and place them over the top and bottom of an image using :before and :after instead of actual elements.

Here’s a rough example.

Of course the background color has to match the background to wipe the image out.

There may be a better way using masks but haven’t really played with them enough to test :slight_smile:

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.