Font size = "1"
Font size = "2"
Font size = "3"
Font size = "4"
Font size = "5"
Font size = "6"
Font size = "7"

css-tricks1

css-tricks2

css-tricks3

SVG Mask Applied:

Here is the sample.png

Here is the mask.png

mega
fancy

crop

Shapes svg-clipped1

svg-clipped2

svg-clipped3

svg-clipped4

svg-clipped5

svg-clipped6

CSS and SVG Masks

1

2

3

4

5

6

7

8

9

10

11

12

clip-me

I'll be clipped.

4 .lomo-4

CSS & SVG Masks Test cases on HTML/SVG content All code blocks are real-time editable. Prefixes are required for some test cases, but are automatically added by Autoprefixer for convenience. In the page: Clipping Masking Notes Clipping Clipping in CSS can be compared to Photoshop “Vector Masks”. So only vector shapes.

clip: rect()C1 Note: Property deprecated

clip-path: inset()C2

clip-path: circle()C3

clip-path: polygon()C4

clip-path: url()C5 Referencing inline SVG

CSS clip-path on SVG contentC8

SVG on SVG contentC9

Note: The SVG part is not editable due to an Edge bug.

Masking Masking in CSS can be compared to Photoshop masks, as follow: Alpha masks are Photoshop “Clipping Masks”: transparency matters. This is the default for CSS masks. Luminance masks are Photoshop “Layer Masks”: white and black matter. This is the default for SVG masks. Here are masks images used on some test cases below: alpha-mask.png and luminance-mask.png

mask-image: linear-gradient()M1 Using (default) alpha mask

2

mask-image: url()M3 Using (default) alpha mask

4

mask-*M5 Like all background-* properties

mask-image: url()M6 Referencing inline SVG , using (default) luminance mask

mask-image: url()M7 Referencing inline SVG , forcing alpha mask

mask-image: url()M8 Referencing inline SVG as data:image

mask-image: url()M9 Referencing external SVG

CSS mask on SVG contentM10

SVG on SVG contentM11

Note: The mask-image property doesn’t seem to work on WebKit based browsers. Use mask instead. Also the SVG part is not editable due to an Edge bug.