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.

Image of lighthouse used for CSS image effects demo
The unedited background-image manipulated using CSS.

In most of these effects the single source background-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.

Click on CodePen buttons to see how effects are implemented, or scroll down to the Implementation section.

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 (12.8kb) or minified (8.7kb). Using gzip, the entire image effects library is less than 1300 bytes.

This project is available on GitHub.

Image of lighthouse
/** Your browser does not yet support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
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!

Image of lighthouse
/** Your browser does not yet support one or more of the following properties:
  • filter
  • mix-blend-mode
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

Image of lighthouse
/** Your browser does not yet support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
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

Image of lighthouse
/** Your browser does not yet support the following properties necessary for this image effect:
  • filter
  • 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

Image of lighthouse
/** Your browser does not yet support the following properties necessary for this image effect:
  • filter
  • background-blend-mode
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

Image of lighthouse
/** Your browser does not yet support the following properties necessary for this image effect:
  • filter
  • background-blend-mode: color;
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

Implementation

In each of these CSS/SCSS snippets, replace photo.jpg with the URL of the image you are using.

Example HTML

<div class="emboss-effect">
  <img width="" height="" src="photo.jpg" alt="">
</div>

In this implementation, the <img> tag acts as a placeholder, setting the correct aspect ratio for the effect while being visually hidden with CSS. Setting values for the width, height, and alt attributes is recommended.

To try out any effect for yourself, click on the CodePen button.

Image of lighthouse
/** Your browser does not yet support the following properties necessary for this image effect:
  • filter
  • mix-blend-mode
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

Image of lighthouse
/** Your browser does not yet support the following properties necessary for this image effect:
  • background-blend-mode
  • mix-blend-mode
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

Image of lighthouse
/** Your browser does not yet support the following properties necessary for this image effect:
  • background-blend-mode
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

Image of lighthouse
/** Your browser does not yet support the following properties necessary for this image effect:
  • background-blend-mode
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

Image of lighthouse
/** Your browser does not yet support the following properties necessary for this image effect:
  • background-blend-mode
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?

3800 followers

Image of lighthouse
/** Your browser does not yet support the following properties necessary for this image effect:
  • background-blend-mode
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

Image of lighthouse
/** Your browser does not yet support the following properties necessary for this image effect:
  • background-blend-mode
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

Image of lighthouse
.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

Image of lighthouse
/** Your browser does not yet 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

Image of lighthouse
.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

Image of lighthouse
/** Your browser does not yet support the following properties necessary for this image effect:
  • background-blend-mode: color;
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

Image of lighthouse
/** Your browser does not yet 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

Image of lighthouse
/** Your browser does not yet 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

Image of lighthouse
/** Your browser does not yet support the following properties necessary for this image effect:
  • 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 and unique I'll be happy to add it to this page with your name and a link to your website.