<svg viewBox="0 0 0 0" width="0" height="0">
  <filter id="filter-1">
    <feColorMatrix type="matrix" values=".33 .33 .33 0 0
            .33 .33 .33 0 0
            .33 .33 .33 0 0
            0 0 0 1 0">
    </feColorMatrix>
    <feComponentTransfer color-interpolation-filters="sRGB">
      <feFuncR type="table" tableValues="0.878 0.788"></feFuncR>
      <feFuncG type="table" tableValues="0.141 0.784"></feFuncG>
      <feFuncB type="table" tableValues="0.435 0.172"></feFuncB>
    </feComponentTransfer>
  </filter>

  <filter id="filter-2">
    <feColorMatrix type="matrix" values=".33 .33 .33 0 0
            .33 .33 .33 0 0
            .33 .33 .33 0 0
            0 0 0 1 0">
    </feColorMatrix>
    <feComponentTransfer color-interpolation-filters="sRGB">
      <feFuncR type="table" tableValues="0.6 0.9"></feFuncR>
      <feFuncG type="table" tableValues="0.5 0.8"></feFuncG>
      <feFuncB type="table" tableValues="0.2 0.5"></feFuncB>
    </feComponentTransfer>
  </filter>

  <filter id="filter-3">
    <feColorMatrix type="matrix" values=".33 .33 .33 0 0
            .33 .33 .33 0 0
            .33 .33 .33 0 0
            0 0 0 1 0">
    </feColorMatrix>
    <feComponentTransfer color-interpolation-filters="sRGB">
      <feFuncR type="table" tableValues="0.4 0.7"></feFuncR>
      <feFuncG type="table" tableValues="0.3 0.5"></feFuncG>
      <feFuncB type="table" tableValues="0.6 0.9"></feFuncB>
    </feComponentTransfer>
  </filter>

  <filter id="filter-4">
    <feColorMatrix type="matrix" values=".33 .33 .33 0 0
            .33 .33 .33 0 0
            .33 .33 .33 0 0
            0 0 0 1 0">
    </feColorMatrix>
    <feComponentTransfer color-interpolation-filters="sRGB">
      <feFuncR type="table" tableValues="0.3 0.6"></feFuncR>
      <feFuncG type="table" tableValues="0.7 0.9"></feFuncG>
      <feFuncB type="table" tableValues="0.1 0.4"></feFuncB>
    </feComponentTransfer>
  </filter>
</svg>
<div>
  <img src="https://assets.codepen.io/159218/Barnaby.jpg" alt="" />
  <img src="https://assets.codepen.io/159218/Barnaby.jpg" alt="" />
  <img src="https://assets.codepen.io/159218/Barnaby.jpg" alt="" />
  <img src="https://assets.codepen.io/159218/Barnaby.jpg" alt="" />
</div>
div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  aspect-ratio: 1;
  width: 100vmin;
  margin: 0 auto;
}

img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  &:first-child {
    filter: url(#filter-1);
  }
  &:nth-child(2) {
    filter: url(#filter-2);
  }
  &:nth-child(3) {
    filter: url(#filter-3);
  }
  &:nth-child(4) {
    filter: url(#filter-4);
  }
}

body {
  margin: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  background: radial-gradient(rgb(0 0 0 / 0.8) 70%, transparent 30%),
    radial-gradient(rgb(20 20 20 / 0.9) 70%, transparent 15%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.