CSS Masks

Method of displaying part of an element, using a selected image as a mask

Spec https://www.w3.org/TR/css-masking-1/
Status W3C Candidate Recommendation
IE Edge Firefox Chrome Safari Opera
      98 (1,*)    
    95 97 (1,*)    
    94 96 (1,*) TP (1,*)  
11 95 (1,*) 93 95 (1,*) 15 (1,*) 80 (1,*)
10 94 (1,*) 92 94 (1,*) 14.1 (1,*) 79 (1,*)
9 93 (1,*) 91 93 (1,*) 14 (1,*) 78 (1,*)
8 92 (1,*) 90 92 (1,*) 13.1 (1,*) 77 (1,*)
Show all
7 91 (1,*) 89 91 (1,*) 13 (1,*) 76 (1,*)
6 90 (1,*) 88 90 (1,*) 12.1 (1,*) 75 (1,*)
5.5 89 (1,*) 87 89 (1,*) 12 (1,*) 74 (1,*)
  88 (1,*) 86 88 (1,*) 11.1 (1,*) 73 (1,*)
  87 (1,*) 85 87 (1,*) 11 (1,*) 72 (1,*)
  86 (1,*) 84 86 (1,*) 10.1 (1,*) 71 (1,*)
  85 (1,*) 83 85 (1,*) 10 (1,*) 70 (1,*)
  84 (1,*) 82 84 (1,*) 9.1 (1,*) 69 (1,*)
  83 (1,*) 81 83 (1,*) 9 (1,*) 68 (1,*)
  81 (1,*) 80 81 (1,*) 8 (1,*) 67 (1,*)
  80 (1,*) 79 80 (1,*) 7.1 (1,*) 66 (1,*)
  79 (1,*) 78 79 (1,*) 7 (1,*) 65 (1,*)
  18 (6,7) 77 78 (1,*) 6.1 (1,*) 64 (1,*)
  17 (4,5) 76 77 (1,*) 6 (1,*) 63 (1,*)
  16 75 76 (1,*) 5.1 (1,*) 62 (1,*)
  15 74 75 (1,*) 5 (1,*) 60 (1,*)
  14 73 74 (1,*) 4 (1,*) 58 (1,*)
  13 72 73 (1,*) 3.2 57 (1,*)
  12 71 72 (1,*) 3.1 56 (1,*)
    70 71 (1,*)   55 (1,*)
    69 70 (1,*)   54 (1,*)
    68 69 (1,*)   53 (1,*)
    67 68 (1,*)   52 (1,*)
    66 67 (1,*)   51 (1,*)
    65 66 (1,*)   50 (1,*)
    64 65 (1,*)   49 (1,*)
    63 64 (1,*)   48 (1,*)
    62 63 (1,*)   47 (1,*)
    61 62 (1,*)   46 (1,*)
    60 61 (1,*)   45 (1,*)
    59 60 (1,*)   44 (1,*)
    58 59 (1,*)   43 (1,*)
    57 58 (1,*)   42 (1,*)
    56 57 (1,*)   41 (1,*)
    55 56 (1,*)   40 (1,*)
    54 55 (1,*)   39 (1,*)
    53 54 (1,*)   38 (1,*)
    52 (2) 53 (1,*)   37 (1,*)
    51 (2) 52 (1,*)   36 (1,*)
    50 (2) 51 (1,*)   35 (1,*)
    49 (2) 50 (1,*)   34 (1,*)
    48 (2) 49 (1,*)   33 (1,*)
    47 (2) 48 (1,*)   32 (1,*)
    46 (2) 47 (1,*)   31 (1,*)
    45 (2) 46 (1,*)   30 (1,*)
    44 (2) 45 (1,*)   29 (1,*)
    43 (2) 44 (1,*)   28 (1,*)
    42 (2) 43 (1,*)   27 (1,*)
    41 (2) 42 (1,*)   26 (1,*)
    40 (2) 41 (1,*)   25 (1,*)
    39 (2) 40 (1,*)   24 (1,*)
    38 (2) 39 (1,*)   23 (1,*)
    37 (2) 38 (1,*)   22 (1,*)
    36 (2) 37 (1,*)   21 (1,*)
    35 (2) 36 (1,*)   20 (1,*)
    34 (2) 35 (1,*)   19 (1,*)
    33 (2) 34 (1,*)   18 (1,*)
    32 (2) 33 (1,*)   17 (1,*)
    31 (2) 32 (1,*)   16 (1,*)
    30 (2) 31 (1,*)   15 (1,*)
    29 (2) 30 (1,*)   12.1
    28 (2) 29 (1,*)   12
    27 (2) 28 (1,*)   11.6
    26 (2) 27 (1,*)   11.5
    25 (2) 26 (1,*)   11.1
    24 (2) 25 (1,*)   11
    23 (2) 24 (1,*)   10.6
    22 (2) 23 (1,*)   10.5
    21 (2) 22 (1,*)   10.0-10.1
    20 (2) 21 (1,*)   9.5-9.6
    19 (2) 20 (1,*)   9
    18 (2) 19 (1,*)    
    17 (2) 18 (1,*)    
    16 (2) 17 (1,*)    
    15 (2) 16 (1,*)    
    14 (2) 15 (1,*)    
    13 (2) 14 (1,*)    
    12 (2) 13 (1,*)    
    11 (2) 12 (1,*)    
    10 (2) 11 (1,*)    
    9 (2) 10 (1,*)    
    8 (2) 9 (1,*)    
    7 (2) 8 (1,*)    
    6 (2) 7 (1,*)    
    5 (2) 6 (1,*)    
    4 (2) 5 (1,*)    
    3.6 (2) 4 (1,*)    
    3.5 (2)      
    3      
    2      
Safari on iOS Opera Mini Android Browser Blackberry Browser Opera Mobile Android Chrome Android Firefox IE Mobile Android UC Browser Samsung Internet QQ Browser Baidu Browser KaiOS Browser
15 (1,*) all 94 (1,*) 10 (1,*) 64 (1,*) 94 (1,*) 92 11 12.12 (1,*) 15.0 (1,*) 10.4 (1,*) 7.12 (1,*) 2.5 (2)
14.5-14.8 (1,*)   4.4.3-4.4.4 (1,*) 7 (1,*) 12.1     10   14.0 (1,*)      
14.0-14.4 (1,*)   4.4 (1,*)   12         13.0 (1,*)      
13.4-13.7 (1,*)   4.2-4.3 (1,3,*)   11.5         12.0 (1,*)      
Show all
13.3 (1,*)   4.1 (1,3,*)   11.1         11.1-11.2 (1,*)      
13.2 (1,*)   4 (1,3,*)   11         10.1 (1,*)      
13.0-13.1 (1,*)   3 (1,3,*)   10         9.2 (1,*)      
12.2-12.5 (1,*)   2.3 (1,3,*)             8.2 (1,*)      
12.0-12.1 (1,*)   2.2 (1,3,*)             7.2-7.4 (1,*)      
11.3-11.4 (1,*)   2.1 (1,3,*)             6.2-6.4 (1,*)      
11.0-11.2 (1,*)                 5.0-5.4 (1,*)      
10.3 (1,*)                 4 (1,*)      
10.0-10.2 (1,*)                        
9.3 (1,*)                        
9.0-9.2 (1,*)                        
8.1-8.4 (1,*)                        
8 (1,*)                        
7.0-7.1 (1,*)                        
6.0-6.1 (1,*)                        
5.0-5.1 (1,*)                        
4.2-4.3 (1,*)                        
4.0-4.1 (1,*)                        
3.2 (1,*)                        

Notes

  1. Partial support in WebKit/Blink browsers refers to supporting the mask-image and mask-box-image properties, but lacking support for other parts of the spec.

  2. Partial support in Firefox refers to only support for inline SVG mask elements i.e. mask: url(#foo).

  3. Partial support refers to supporting the mask-box-image shorthand but not the longhand properties

  4. Can be enabled in MS edge behind the "Enable CSS Masking" flag.

  5. Partial support refers to supporting mask-image and mask-size

  6. Partial support refers to supporting mask-image, mask-size, mask-position, mask-repeat and mask-composite

  7. Edge also recognizes and supports all the -webkit- prefixed equivalents of the unprefixed properties for site compatibility

* Partial support with prefix.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css-masks