The Orton Effect - dreamy photo effect in CSS and React

The Orton Effect is a photography technique that involves taking two pictures of the same scene, one with a long exposure and one with a shorter exposure, and then combining them. The result is an image that has both the sharpness of the long exposure and the detail of the shorter exposure. While it's not an exact replica, we can simulate a phoo filter for the Orton Effect using CSS and React.

To emulate the Orton Effect in CSS, we need to layer 2 copies of the same image on top of one other. To accomplish that, we'll nest them under a single parent - in this case, the figure element. Note that for the second image, we set aria-hidden=true, and intentinally set alt to an empty string, so that Screen Readers and other visual assistive tools skip them. won't encounter the repeated image element. You can read more about that and other accessibility features of HTML on MDN.

1
<figure class="orton-effect">
2
  <img
3
    src="https://source.unsplash.com/tRDGs9utMUo/1600x900"
4
    alt="A man in the crosswalk on a city street"
5
  />
6
  <img
7
    src="https://source.unsplash.com/tRDGs9utMUo/1600x900"
8
    aria-hidden="true"
9
    alt=""
10
  />
11
</figure>

Next, we'll use a CSS rule to apply some styles to the first of the two images (in HTML-speak, that's the one on top).

1
figure.orton-effect img:first-of-type {
2
  position: absolute;
3
  mix-blend-mode: lighten;
4
  filter: blur(50px);
5
  opacity: 50%;
6
}

We're setting position: absolute; to layer this image on top of its sibling within the <figure> element. The remaining 3 lines of CSS set the top image to use the lighten blend mode, apply a gaussian blur using filter, and make the top image partly translucent by way of the opacity CSS property.

This creates a hazy, glassy effect:

It's subtle - but it is there, adding just a slight haze over the light parts of the photo, like a morning fog settling in over a dreamscape.

To apply this to an adjustable React Component, we'll use CSS-in-JS to make blur and opacity dynamic. There's many ways to get this done, of course, so you may prefer a different approach. This is what a simple react component for this layout might look like:

1
const OrtonEffectImage = ({ alt, blurRadius, opacity, src }) => {
2
  return (
3
    <figure>
4
      <img
5
        src={src}
6
        alt={alt}
7
        style={{
8
          mixBlendMode: 'lighten',
9
          filter: `blur(${blurRadius}px)`,
10
          opacity: `${opacity}%`,
11
          position: 'absolute',
12
        }}
13
      />
14
      <img src={src} ariaHidden alt="" />
15
    </figure>
16
  );
17
};

This gives us a reusable component that just needs a few parameters passed in - for example:

1
<OrtonEffectImage
2
  src={
3
    'https://res.cloudinary.com/mikebifulco-com/image/upload/v1662995539/posts/orton-effect-css-react/snowy.jpg'
4
  }
5
  alt="A snowy landscape"
6
  blurRadius={30}
7
  opacity={70}
8
/>

Note that a few things have changed here - we're no longer using a named CSS class (.orton-image) to select and modify images via CSS. The CSS is now specified on the img tag itself, and because it is passed in via style prop, it is a JavaScript Object -- so keywords have gone from skewer-case to camelCase, and there's commas where we once had semicolons. Additionally, we're using ES6 String templates to interpolate style rules from the opacity and blur radiuses passed in.

There's some improvement to be done from here - you should do some error checking to make sure that opacity stays between 0 and 100%, and that the blur radius is a positive integer. It's also a good idea to provide some sensible fallback values for those options, in case they're not provided. I'll leave that up to you to implement.

Below you will see the Orton Effect applied to a handful of other images from Unsplash.

I've taken the above example a little further, and made blur and opacity adjustable, so that you can see how each parameter changes the image effect.

I've found that an opacity of somewhere between 25 and 50% and tends to create a nice, subtle effect. The "right" blur radius is a bit more dependent on the specific image.

Opacity:

%

70

/100%

Blur Radius:

px

30

/100px

Opacity:

%

70

/100%

Blur Radius:

px

30

/100px

Opacity:

%

70

/100%

Blur Radius:

px

30

/100px

The Orton effect is a photography technique that involves taking two images - one in focus and one out of focus - and overlaying them to create a third image with a dreamy, ethereal quality.

It turns out that this effect can also be simulated using CSS and React! All you need is a bit of code to overlay two images and some CSS to blur one of the images.

If you're looking to add a touch of magic to your photos, then recreating the Orton effect with CSS and React is a great way to do it.

If you found this post useful, I'd love it if you'd consider subscribing to my newsletter, Tiny Improvements - I share articles and resources that catch my attention, as well as my perspective on tech news, designing products, and living a fulfilling life.