<html lang="es">
<head>
  <title>Background-blend-mode</title>
  
  <!-- Google Fonts -->
  <link href='https://fonts.googleapis.com/css?family=Raleway:700,400' rel='stylesheet' type='text/css'>
  
  <!-- Metas -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  
</head>
<body>
  <!-- Title --> 
  <h1>Background-blend-mode</h1>
  <!-- Strong / Subtitle -->
  <strong>(Scroll to continue)</strong>
  
  <!-- Container -->
  <div class="container">
    
    <!-- First image -->
    <div class="image"></div>
    <span>+</span>
    
    <!-- Second image -->
    <div class="image2"></div>
    <span>+</span>
    
    <!-- Color -->
    <div class="color"></div>
    <span>⬇</span>
    
    <!-- Effect -->
    <div class="difference"></div>
    
  </div>
</body>
</html>
/* Body */
body
  font-family: 'Raleway', sans-serif;
  text-align center

/* Span / Symbols */
span
  font-size 10em
  font-weight 700
  color #393E46

/* h1 / Title */
h1
  margin-bottom 0
  letter-spacing 5px
  text-transform uppercase
  
/* Strong / Subtitle */
strong
  margin 0.5rem 0 1.5rem 0
  display inline-block
  
/* Container */
.container
  display flex
  justify-content center
  flex-wrap wrap
  margin 0 auto
  max-width 640px
  padding 0.5rem
  
/* Default styles */
.image
.image2
.color
.difference
  width 100%
  height 426px
  border 3px solid #393E46
  border-radius 5px

/* First image */
.image
  background url(https://s-media-cache-ak0.pinimg.com/736x/a2/5e/07/a25e0764f1842af9acea6a0264e03331.jpg) no-repeat center center
  
/* Second image */
.image2
  background url(https://s-media-cache-ak0.pinimg.com/originals/76/87/f9/7687f93b5599c3ebca8585ddd9e63880.jpg) no-repeat

/* Color */
.color
  background #0C94F5
  
/* Effect */
.difference
  background url(https://s-media-cache-ak0.pinimg.com/736x/a2/5e/07/a25e0764f1842af9acea6a0264e03331.jpg), url(https://s-media-cache-ak0.pinimg.com/originals/76/87/f9/7687f93b5599c3ebca8585ddd9e63880.jpg) no-repeat center center
  background-color #0C94F5
  background-blend-mode difference
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.