10 expert tips for designing with a blurred background [case studies]

10 expert tips for designing with a blurred background featured image

Blurred images:a photography mistake? In some cases, yes, but also a useful design tool.

Now, we’re not talking about salvaging a bad photo by slapping a blur effect on it and calling it good enough. Instead, we’re going to look at intentionally choosing or creating different types of blurred images to enhance our designs in specific ways.

If you pay attention to web and graphic design styles, you may have noticed that this has been something of a trend in recent years. You might see blurred images popping up in website hero headers(opens in a new tab or window) (the large images that extend the whole width of a page) or as site backgrounds, or to set off typography in graphic design.

But the design trends that stick around, like this one, usually do because they’re functional as well as beautiful — they have a purpose beyond just following the crowd or experimenting with a new look just because you can. Good trends do something to improve your designs.

So how can you use blurred images to enhance your own designs? Let’s look at 10 techniques:

01. Create an uncluttered background

One of the most common uses for blurred images is to place them in the background of a design. Photography, in general, can make for a visually interesting background, but blurring it can often make it even more effective. How? A busy or highly detailed background can sometimes make other design elements, especially text, hard to see. So applying a blur effect(opens in a new tab or window) or blur background(opens in a new tab or window) — either subtle or more significant depending on how busy the image is — can help create an uncluttered background that won’t distract from your content.

The following landing page has a background photo with a strong blur effect. Notice how that smooth, uncluttered backdrop is more interesting than just a solid color, but it also makes the white, lightweight font easy to read — something that probably wouldn’t be the case against a busier or more detailed image.



This example illustrates one of two common approaches:blurring the whole image versus blurring selectively. Here, the whole image is blurred consistently, but another option is to vary the focus in your image by blurring only parts of it.

In photography, this concept is known as “depth of field.” Even if you’re not familiar with the term, you’ve probably seen it in action. In an image with a shallow depth of field, the area in focus is very narrow; for instance, for a portrait, the subject’s face might be in focus, but their surroundings are completely blurry. On the other hand, in an image with a wide depth of field, the area of focus is larger; the whole image might be crystal-clear from front to back, such as for landscape photography.

For example, the image used as the background for this event poster has a fairly shallow depth of field, with only the foreground objects in focus:


Ben Biondo

Using images that feature a shallower depth of field can allow you to emphasize your focal point in an effective way.

02. Focus on what’s important

Blurring can be added to images for a certain effect or purpose, but you can also use it to remove or de-emphasize parts of the image. One of the most likely reasons you’ll want to do this is to make sure that your focal point is the clear center of attention. If you’re trying to get viewers to focus on a particular aspect of your image — perhaps a product you’re selling — then you don’t want them distracted by less important surroundings.

This series of six branding images uses selective blurring (achieved by manipulating the depth of field) to ensure that the product being advertised is in the spotlight. But the out-of-focus parts of the images aren’t useless space:the depth of field allows for gradual blurring, so other objects are still recognizable (and, as a nice touch, those objects represent the flavors of the drinks).


Awwwards.com/Plug & Play for Kissmix

Here’s another, different use of depth of field (the foreground is out of focus in addition to the background), but it still directs your attention to the main subject of the design — in the case of this wedding invitation, the happy couple:


Etsy/Conteur Co

03. Give context to the design’s message

Why do we add images to our designs? Generally, it’s to illustrate and enhance the design’s message. Even though they may not be clear and detailed, blurred images can still fill this role; often it’s just in a more understated way (i.e., not the focal the point — as images in something like a magazine layout would be).

Take this design as an example. The registration form for a fitness class has a semi-transparent background, which lets the image of woman running show through behind it. This picture acts as an instant visual cue about the purpose and theme of the design — viewers don’t have to wonder what it’s for. When using this technique, careful image selection is particularly important to make sure that it’s a good match and reinforces the rest of the design.


Dribbble/Charles Patterson

04. Set a backdrop to showcase typography

For a design where typography is the focal point — perhaps a logo or a social media graphic or some hand-drawn type — having a backdrop can help show it off to its best advantage. Sometimes a plain white, black, or colored background will work, or a textured backdrop will do the trick, but a blurred image can enhance some types of designs even more.

When might you want to do this? For starters, techniques #1 and #3 might be reasons — for a non-distracting background or to boost your design’s message. The blurred image below does both those things for the typographic logo it’s supporting. But it also does something else. Since it’s not obvious from the logo’s name and tagline what kind of business it belongs to, the photo hints at some of the missing information:it’s a furniture design company. This approach makes it possible to simplify the design, not adding any extra, explanatory text to take away from the main typography and letting the image fill in the blanks.


Dribbble/Bill S. Kenney for Focus Lab’

And here’s another blurred background that sets the tone for some typography and supports its theme:


Pinegate Road for Verily Magazine

05. Use an image representative of your brand

Images are a great place to cement some of the aesthetics associated with your brand, such as certain colors, imagery and symbols, or other visual themes. Having a strong, recognizable style helps brands stand out and connect with their audience in a memorable way.

This website creatively reuses a key image from its logo. See the brown-and-white dog icon from the logo in the upper left hand corner? Now look at the header photo; the real dog strikingly resembles the illustration, doesn’t it? It even has a dark patch over one of its eyes, just like the logo. I guarantee this wasn’t a coincidence, but a smart design choice to reinforce the company’s branding. Also notice how the blurring in the photo visually helps make the dog the center of attention.


Awwwards.com/Cuker for Dogswell

You could even reuse the exact same image, as this brand identity for a church does for both its website and printed materials.


Dobbo Design

It even features a series of season-themed, blurred images to suit different events throughout the year. Getting creative with using and reusing your visual resources can help create a consistent (but not monotonous) look for your branding collateral.

06. Get dramatic with your blurring

Various levels of blurring — from subtle to dramatic — will achieve different effects and purposes in your imagery. On one extreme, you can blur so much that, if it’s a photograph, nothing is recognizable:you end up with a soft, abstract wash of colors and/or vague shapes. This could be a good option if you want some something more dynamic than a solid-color background — a little shape and color, but no distracting details.

But again, this isn’t just a random design decision or something to try just because it looks cool. Let’s take a look at the following example, which uses this technique effectively. The landing page below is for an organization that facilitates the creation of community gardens. Now look at the background; there’s nothing clearly identifiable because of the strong blur effect, but the image still gives the impression of flowers and leaves and sunlight without actually plastering those images all over the page.


Dribbble/Kelly Tomlinson

Instead, this minimalistic approach works in a more subconscious way — even if we’re not thinking about it, our brains are associating those colors with flowers in a garden, which is perfectly appropriate for this brand. And if the photo was not blurred, and left all the details of leaves and petals and stems visible, then that white text would not be nearly as easy to see, if legible at all. So it’s a smart design choice:a win-win in terms of both subtle branding and visibility.

Similarly, this business card for a high-end watch repair shop has a strongly blurred background that looks pretty abstract at first glance — just an elegant, black-and-white background for the gold foil typography. But look closer (in the bottom right corner, where the focus is clearer) and you’ll see that the blurred, round shapes in the image are really watch faces.


UnderConsideration/John Appleman

07. Soften unwanted details

Unlike the previous technique, which used strong blurring to wipe out all the details in an image, this one blurs softly and selectively to disguise only the details that you want to be less conspicuous or that you don’t want showing at all in your image. This is a common approach for portraits; a soft blur can be flattering, and make skin look smoother.

This image from an eyewear brand isn’t exactly a portrait (more like product photography), but it does feature people and use multiple types of blurring to good effect. First, notice how the depth of field directs your view straight to the woman wearing the sunglasses. Also, notice the soft blurring on everything except the woman’s eyes and the sunglasses — as the product being advertised, those get to be in the sharpest relief. But this slight blur also has the side effect of giving the whole image a glamorous, high-fashion look that suits the brand.


Awwwards.com/Les Avignons for Andy Wolf Eyewear

Get the look with this template:Jewelry and Accessories Online Store Website

08. Add a Subtle Sense of Place

Blurred images can be a clever way to give a design a subtle sense of place or location when you don’t want to go in a direction that’s already been done a million times or use imagery that’s typical or expected. This is especially true of travel-related designs.

For instance, the webpage below for a resort in Utah could have used crystal-clear, colorful pictures of the resort building itself. Instead, the whole layout is filled with a majestic, monochromatic mountain scene to emphasize the resort’s location (and skiing opportunities). Plus the gradual blurring and fading from bottom to top gives the primary information a clear place to sit at the top of the page.


Dribbble/Bilal | S&N

Likewise, the ad below for a seasonal sale creates a certain sense of place — specifically a sunny, summery locale that matches the theme of the promotion.


via Milled

09. Make some movement

Photography that features a specific type of blur known as motion blur makes it look like an object is moving quickly through or past a scene. The blurring generally happens in a horizontal direction, behind the moving object/focal point. This can add a sense of speed or activity to your images.

This promotional design concept features motion blurring to bring attention to the product being advertised (the car), and what better thing to associate with an automobile brand being marketed as “fun” than speed? Also, like many of the examples we’ve looked at already, the blurring in this image creates a space where typography can stand out well.


Dribbble/Ales Nesetril

As another example, this magazine cover uses a photo featuring motion blur to communicate the hustle and bustle of New York, “The City That Never Sleeps,” where everyone’s supposedly always in a hurry.


New York Magazine/Erik Marinovich; photo by Saul Leiter

10. Strike a mood

There’s nothing quite like a good image to give your design a certain mood or atmosphere. Lots of qualities can contribute to an image setting the mood of a design—its content, of course, but also things like color, light and shadow, composition, and more.

The image below communicates a very specific mood, one that no doubt was carefully chosen to visualize the summer camp that it represents. First, the warm colors clearly reference summer, but the blur of the image (along with the expression on the camper’s face) also seems to represent crazy summer fun at full speed—or just what the headline of the page claims to offer:“the summer of a lifetime.”


Awwwards.com/Whiteboard, Brand Apart

As a different approach, the blurring of the images featured in this wedding photography booklet help create a soft, dreamy mood:


Grit & Wit Design, Ashley Kelemen Photography

Ready to try it out yourself?

You’ve studied the examples, learned the techniques, and now you can try some blurring in your own designs. If you’re using Canva, it’s super simple to add an overall blur to your images. Just place an image (either upload your own or choose from one of our many free or stock options)…

Before Blurring:

Then, with the image selected, click “Filter.” In the window that pops up, click “Advanced Options” at the bottom, then just adjust the Blur slider to adjust the strength of the blur until you like the way your image looks.

After Blurring:

To get you started, here are 3 blurred backgrounds ready to go in Canva. As always, happy designing!

Related articles

See all

Bring your ideas to life in minutes

Express yourself with the world's easiest design program.