Image Effects with CSS

Bennett Feely Twitter CodePen

How it works

Using one or more newer CSS properties (background-blend-mode, mix-blend-mode, or filter) gives us a surprising amount of possibilities to manipulate a single source image.

The unedited background-image manipulated using CSS.

In most of these effects the single source image url is repeated one or more times and blended with itself using CSS blend modes (multiply, overlay, screen, difference, etc.)

In some of these effects, the CSS filter property is used to further refine the output. Functions like grayscale(), brightness(), and contrast() can and should be tweaked to achieve a better result for images you use.

These effects should be used as a progressive enhancement.

By default, the source image is displayed without any effects. When CSS @supports detects support for the required CSS properties and values for an individual effect, then the effect will be enabled. This amounts to a precise, native, and lightweight feature detection.

A complete CSS library of these effects can be downloaded unminified (13kb) or minified (8.9kb). Using gzip, the entire image effects library is less than 1300 bytes.

This project is available on GitHub.

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
  • background-blend-mode: color;
  • mix-blend-mode
  • mix-blend-mode: color;
  • transform
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.pencil-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (background-blend-mode: difference) {
  .pencil-effect {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
    box-shadow: inset 0 0 0 1px black;
  }
}

.pencil-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (filter: invert(1)) and (background-blend-mode: difference) {
		background-image: $url, $url;
		background-blend-mode: difference;
		background-position:
			calc(50% - 1px) calc(50% - 1px),
			calc(50% + 1px) calc(50% + 1px);
		filter: brightness(2) invert(1) grayscale(1);
		box-shadow: inset 0 0 0 1px black;
	}
}
CSS SCSS CodePen Copy

Share this page with others!

/** Your browser does not support one or more of the following properties:
  • filter
  • background-blend-mode
  • background-blend-mode: color;
  • mix-blend-mode
  • mix-blend-mode: color;
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.watercolor-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
  .watercolor-effect {
    position: relative;
    overflow: hidden;
  }
  .watercolor-effect:before, .watercolor-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
  }
  .watercolor-effect:before {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
    box-shadow: inset 0 0 0 1px black;
  }
  .watercolor-effect:after {
    background-image: url(photo.jpg);
    background-position: center;
    mix-blend-mode: multiply;
    filter: brightness(1.3) blur(2px) contrast(2);
  }
}

.watercolor-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
		position: relative;
		overflow: hidden;

		&:before, &:after {
			display: block;
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-size: cover;
		}

		&:before {
			background-image: $url, $url;
			background-blend-mode: difference;
			background-position:
				calc(50% - 1px) calc(50% - 1px),
				calc(50% + 1px) calc(50% + 1px);
			filter: brightness(2) invert(1) grayscale(1);
			box-shadow: inset 0 0 0 1px black;
		}

		&:after {
			background-image: $url;
			background-position: center;
			mix-blend-mode: multiply;
			filter: brightness(1.3) blur(2px) contrast(2);
		}
	}
}
CSS SCSS CodePen Copy

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
  • background-blend-mode: color;
  • mix-blend-mode
  • mix-blend-mode: color;
  • transform
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.emboss-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (background-blend-mode: difference, screen) {
  .emboss-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference, screen;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
    filter: brightness(2) invert(1) grayscale(1);
  }
}

.emboss-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (filter: invert(1)) and (background-blend-mode: difference, screen) {
		background-image: $url, $url, $url;
		background-blend-mode: difference, screen;
		background-position:
			calc(50% - 1px) calc(50% - 1px),
			calc(50% + 1px) calc(50% + 1px),
			center;
		filter: brightness(2) invert(1) grayscale(1);
	}
}
CSS SCSS CodePen Copy

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • mix-blend-mode
  • mix-blend-mode: color;
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.colored-pencil-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (mix-blend-mode: color) {
  .colored-pencil-effect {
    position: relative;
  }
  .colored-pencil-effect:before, .colored-pencil-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    box-shadow: inset 0 0 0 1px black;
  }
  .colored-pencil-effect:before {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
  }
  .colored-pencil-effect:after {
    background: inherit;
    mix-blend-mode: color;
  }
}

.colored-pencil-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (filter: invert(1)) and (mix-blend-mode: color) {
		position: relative;

		&:before,
		&:after {
			display: block;
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-size: cover;
			box-shadow: inset 0 0 0 1px black;
		}

		&:before {
			background-image: $url, $url;
			background-blend-mode: difference;
			background-position:
				calc(50% - 1px) calc(50% - 1px),
				calc(50% + 1px) calc(50% + 1px);
			filter: brightness(2) invert(1) grayscale(1);
		}

		&:after {
			background: inherit;
			mix-blend-mode: color;
		}
	}
}
CSS SCSS CodePen Copy

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
  • background-blend-mode: color;
  • mix-blend-mode
  • mix-blend-mode: color;
  • transform
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.chalkboard-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: grayscale(1)) and (background-blend-mode: difference) {
  .chalkboard-effect {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(1.5) grayscale(1);
  }
}

.chalkboard-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (filter: grayscale(1)) and (background-blend-mode: difference) {
		background-image: $url, $url;
		background-blend-mode: difference;
		background-position:
			calc(50% - 1px) calc(50% - 1px),
			calc(50% + 1px) calc(50% + 1px);
		filter: brightness(1.5) grayscale(1);
	}
}
CSS SCSS CodePen Copy

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
  • background-blend-mode: color;
  • transform
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.colored-chalkboard-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: brightness(2)) and (background-blend-mode: color, difference) {
  .colored-chalkboard-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: cover;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
    background-blend-mode: color, difference;
    filter: brightness(2);
  }
}

.colored-chalkboard-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (filter: brightness(2)) and (background-blend-mode: color, difference) {
		background-image: $url, $url, $url;
		background-size: cover;
		background-position:
			calc(50% - 1px) calc(50% - 1px),
			calc(50% + 1px) calc(50% + 1px),
			center;
		background-blend-mode: color, difference;
		filter: brightness(2);
	}
}
CSS SCSS CodePen Copy

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
  • background-blend-mode: color;
  • mix-blend-mode
  • mix-blend-mode: color;
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.airbrush-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) {
  .airbrush-effect {
    position: relative;
    overflow: hidden;
  }
  .airbrush-effect:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
    mix-blend-mode: multiply;
  }
}

.airbrush-effect {
  $url : url(photo.jpg);

  background-image: $url;
	background-size: cover;
	background-position: center;

  @supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) {
		position: relative;
		overflow: hidden;

		&:after {
			display: block;
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: inherit;
			filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
			mix-blend-mode: multiply;
		}
	}
}
CSS SCSS CodePen Copy

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
  • background-blend-mode: color;
  • mix-blend-mode
  • mix-blend-mode: color;
  • transform
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.hallucination-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (mix-blend-mode: multiply) {
  .hallucination-effect {
    position: relative;
    overflow: hidden;
    background-color: magenta;
    background-blend-mode: screen;
  }
  .hallucination-effect:before, .hallucination-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    mix-blend-mode: multiply;
    transform: scale(1.05);
  }
  .hallucination-effect:before {
    background-color: yellow;
    background-blend-mode: screen;
    transform-origin: top left;
  }
  .hallucination-effect:after {
    background-color: cyan;
    background-blend-mode: screen;
    transform-origin: bottom right;
  }
}

.hallucination-effect {
  $url : url(photo.jpg);
  $offset : 5px;

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (mix-blend-mode: multiply) {
    position: relative;
    overflow: hidden;
    background-color: magenta;
    background-blend-mode: screen;

    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      mix-blend-mode: multiply;
      transform: scale(1.05);
    }

    &:before {
      background-color: yellow;
      background-blend-mode: screen;
      transform-origin: top left;
    }

    &:after {
      background-color: cyan;
      background-blend-mode: screen;
      transform-origin: bottom right;
    }
  }
}
CSS SCSS CodePen Copy

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
  • background-blend-mode: color;
  • mix-blend-mode
  • mix-blend-mode: color;
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.flannel-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: overlay) {
  .flannel-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-position: center;
    background-size: 100%, 100000% 100%, 100% 100000%;
    background-blend-mode: overlay;
  }
}

.flannel-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (background-blend-mode: overlay) {
		background-image: $url, $url, $url;
	  background-position: center;
	  background-size: 100%, 100000% 100%, 100% 100000%;
	  background-blend-mode: overlay;
	}
}
CSS SCSS CodePen Copy

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
  • background-blend-mode: color;
  • mix-blend-mode
  • mix-blend-mode: color;
  • transform
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.low-ink-x-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: screen, overlay) {
  .low-ink-x-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: 100% 100%, 10000% 100%;
    background-blend-mode: screen, overlay;
  }
}

.low-ink-x-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (background-blend-mode: screen, overlay) {
		background-image:	 $url, $url, $url;
		background-size: 100% 100%, 10000% 100%;
		background-blend-mode: screen, overlay;
	}
}
CSS SCSS CodePen Copy

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
  • background-blend-mode: color;
  • mix-blend-mode
  • mix-blend-mode: color;
  • transform
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.low-ink-y-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: screen, overlay) {
  .low-ink-y-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: 100% 100%, 100% 1000%;
    background-blend-mode: screen, overlay;
  }
}

.low-ink-y-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (background-blend-mode: screen, overlay) {
		background-image:	 $url, $url, $url;
		background-size: 100% 100%, 100% 1000%;
		background-blend-mode: screen, overlay;
	}
}
CSS SCSS CodePen Copy

Do you follow me on Twitter?

3732 followers

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
  • background-blend-mode: color;
  • mix-blend-mode
  • mix-blend-mode: color;
  • transform
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.collage-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: overlay) {
  .collage-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: 200%, 80%, 60%, 50%, 40%, 100%;
    background-position: 50%, 80%, 30%, 0;
    background-blend-mode: overlay;
    background-repeat: no-repeat;
  }
}

.collage-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (background-blend-mode: overlay) {
		background-image: $url, $url, $url, $url, $url, $url;
		background-size: 200%, 80%, 60%, 50%, 40%, 100%;
		background-position: 50%, 80%, 30%, 0;
		background-blend-mode: overlay;
		background-repeat: no-repeat;
	}
}
CSS SCSS CodePen Copy

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
  • background-blend-mode: color;
  • mix-blend-mode
  • mix-blend-mode: color;
  • transform
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.mosaic-effect {
  background-image: url(photo.jpg), url(photo.jpg);
  background-size: cover, 5% 5%;
  background-position: center;
  background-blend-mode: overlay;
}

.mosaic-effect {
	$url : url(photo.jpg);

	background-image: $url, $url;
	background-size: cover, 5% 5%;
	background-position: center;
  background-blend-mode: overlay;
}
CSS SCSS CodePen Copy

.photo-border-effect {
  background-image: url(photo.jpg), url(photo.jpg);
  background-position: center;
  background-size: 60%, 20%;
  background-repeat: no-repeat, repeat;
}

.photo-border-effect {
  $url : url(photo.jpg);

  background-image: $url, $url;
  background-position: center;
  background-size: 60%, 20%;
  background-repeat: no-repeat, repeat;
}
CSS SCSS CodePen Copy

Una Kravets

/** Your browser does not support the following properties necessary for this image effect:
  • filter
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.infrared-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
  filter: hue-rotate(180deg) saturate(2);
}

.infrared-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;
  filter: hue-rotate(180deg) saturate(2);
}
CSS SCSS CodePen Copy

.night-vision-effect {
  background-image: url(photo.jpg), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}

.night-vision-effect {
	$url : url(photo.jpg);
  $line-width: 5px;

  background-image:
    $url,
    radial-gradient(
      #0F0,
      #000
    ),
    repeating-linear-gradient(
      transparent 0,
      rgba(0,0,0,0.1) $line-width/2,
      transparent $line-width
    );
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}
CSS SCSS CodePen Copy

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode: color;
  • transform
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.warhol-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: color) {
  .warhol-effect {
    background-image: linear-gradient(#14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100%), linear-gradient(#FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100%), url(photo.jpg);
    background-size: 50% 100%, 50% 100%, 50% 50%;
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: color;
  }
}

.warhol-effect {
  $url : url(photo.jpg);

  background-image: $url;
	background-size: cover;
	background-position: center;

  @supports (background-blend-mode: color) {
		background-image:
	    linear-gradient(
	      #14EBFF 0,
	      #14EBFF 50%,
	      #FFFF70 50%,
	      #FFFF70 100%
	    ),
	    linear-gradient(
	      #FF85DA 0,
	      #FF85DA 50%,
	      #AAA 50%,
	      #AAA 100%
	    ),
	    $url;
		background-size: 50% 100%, 50% 100%, 50% 50%;
	  background-position: top left, top right;
	  background-repeat: no-repeat, no-repeat, repeat;
	  background-blend-mode: color;
	}
}
CSS SCSS CodePen Copy

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
  • mix-blend-mode: color;
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.selective-color-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: brightness(3)) and (mix-blend-mode: color) {
  .selective-color-effect {
    position: relative;
  }
  .selective-color-effect:before, .selective-color-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    background-color: red;
    background-blend-mode: screen;
    mix-blend-mode: color;
    filter: brightness(3);
  }
}

.selective-color-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: brightness(3)) and (mix-blend-mode: color) {
    position: relative;

    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      background-color: red;
      background-blend-mode: screen;
      mix-blend-mode: color;
      filter: brightness(3);
    }
  }
}
CSS SCSS CodePen Copy

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
  • background-blend-mode: color;
  • mix-blend-mode
  • mix-blend-mode: color;
    • li.transform transform
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.mirror-x-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (transform: scaleX(-1)) {
  .mirror-x-effect {
    position: relative;
  }
  .mirror-x-effect:before, .mirror-x-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    background: inherit;
  }
  .mirror-x-effect:before {
    left: 0;
    right: 50%;
    transform: scaleX(-1);
  }
  .mirror-x-effect:after {
    left: 50%;
    right: 0;
  }
}

.mirror-x-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (transform: scaleX(-1)) {
		position: relative;

		&:before, &:after {
			display: block;
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			background: inherit;
		}

		&:before {
			left: 0;
			right: 50%;
			transform: scaleX(-1);
		}

		&:after {
			left: 50%;
			right: 0;
		}
	}
}
CSS SCSS CodePen Copy

/** Your browser does not support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
  • background-blend-mode: color;
  • mix-blend-mode
  • mix-blend-mode: color;
    • li.transform transform
Browser support is tested with CSS @supports. Image effects will fallback in browsers that do not support necessary CSS features. **/
.mirror-y-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (transform: scaleY(-1)) {
  .mirror-y-effect {
    position: relative;
  }
  .mirror-y-effect:before, .mirror-y-effect:after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    background: inherit;
  }
  .mirror-y-effect:before {
    top: 0;
    bottom: 50%;
    transform: scaleY(-1);
  }
  .mirror-y-effect:after {
    top: 50%;
    bottom: 0;
  }
}

.mirror-y-effect {
	$url : url(photo.jpg);

	background-image: $url;
	background-size: cover;
	background-position: center;

	@supports (transform: scaleY(-1)) {
		position: relative;

		&:before, &:after {
			display: block;
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			background: inherit;
		}

		&:before {
			top: 0;
			bottom: 50%;
			transform: scaleY(-1);
		}

		&:after {
			top: 50%;
			bottom: 0;
		}
	}
}
CSS SCSS CodePen Copy

Add your image effect on this page

Tweet or email a link to your CSS image effect demo. If it's neat I'll add it to this page with your name and a link to your website.