18 : Blend Modes, Filter Effects, and Masking


  • Figure 18-1: Comparing different blend modes applied to a source image.
  • Figure 18-2: Blending multiple background image layers.
  • Figure 18-3: Applying multiple blend modes in different combinations.
  • Figure 18-4: Different blend modes applied to the text element, mixed with the background of its parent.
  • Figure 18-5: Isolating an element to set a new stacking context.
  • Figure 18-6: Applying a Gaussian blur filter.
  • Figure 18-7: Adjusting brightness and contrast with CSS filter effects.
  • Figure 18-8: Comparing the drop-shadow() filter with the box-shadow property.
  • Figure 18-9: Function values for the clip-path property: circle() and ellipse().
  • Figure 18-10: The inset() function without and with border radius values.
  • Figure 18-11: A triangular clip path made with the polygon() function.
  • Figure 18-13: A rectangle made with the rectangle() function of -webkit-clip-path.
  • Figure 18-14: The three steps of image masking.
  • Figure 18-15: Comparing rendering order of graphical CSS effects.
  • Figure 18-a: Demonstrating the grayscale(), sepia() and saturate() functions of the filter property.
  • Figure 18-b: An example of the hue-rotate() function of the filter property.
  • Figure 18-c: Comparing the differing effects of the order of values on the filter property.
  • Figure 18-d: Animating shapes made with the clip-path property.

Browser Support

Chrome Firefox Safari IE
background-blend-mode Yes Yes 8 No
mix-blend-mode No* Yes 8 No
isolation No* No 8 No
filter Yes Yes Yes No
clip-path No* No 7§, 8 No
mask Yes No Yes No
  • * Implemented but off by default.
  • † With vendor prefix.
  • ‡ Filters defined in SVG, not shorthand functions.
  • § With outdated syntax.

A note on browser versions

Where a Yes is used in these support tables it means that the feature is supported either in an evergreen browser or in at least the last three versions of Safari (6–8) or IE (9–11). Otherwise, a version number will be shown. With regards to IE, it’s safe to presume that, with a very few exceptions, almost nothing in this book is implemented in IE8 or below.

For more complete version history I highly recommend the Can I use… compatibility tables.