I am trying to display photos on a website that has a black / dark gray gradient background. I am having a hard time making the photos stand out. I have tried adding shadows but they get lost in the background. I have also tried borders, but they tend to look cheesy and forced.

Are there any alternative techniques besides the ones I have mentioned? (Example implementations are appreciated). Key words to help me search on the web would also be nice as I am new to these concepts and am having difficulty finding relevant material.

  • 2
    Can you give any examples of the effect you're trying to achieve? 'Pop' is highly subjective. – ElendilTheTall Aug 18 '14 at 12:36
  • 6
    Usually a dark background makes photos pop more when viewed on a backlit screen - if not that might be a sign that your photos are underexposed? – JohannesD Aug 18 '14 at 13:12
  • 4
    This seems like it might be a web design question, not about the photographs themselves.... – Please Read My Profile Aug 18 '14 at 14:43
  • 3
    Also an example screenshot of what you have now would and are unhappy with would be useful. – James Snell Feb 15 '15 at 9:37
  • I'm voting to close this question as off-topic because it's not really a photography question. – John Cavan Nov 1 '15 at 1:08

You could try to frame them in a wide gray or white passepartout (or mat). This might look like a real image on a wall.

| improve this answer | |

Since you mentioned that shadows are getting lost in the background, you can add bright colored 'glows' instead (if you're working on Photoshop).

Or try some reflections like this.

Pick brighter pictures if you have the option, and try to have images of the same size/aspect ratio

There are many JS image carousel libraries like this which come with built in effects which might provide you with the 'pop'!

Hope this helped :)

| improve this answer | |
  • 2
    Instead of Photoshop, if you can influence the web page styling, you can use CSS box-shadow (just use a bright color to get a glow instead of a shadow). – JohannesD Aug 18 '14 at 14:38

You can give the images a one or two pixel white or grey frame.

This helps separating the image from the background and emphasizes the image borders - usually important element of the composition.

It is obviously less fancy than shadows or glows, but you may find it cleaner and easier for the user to focus on your actual work rather than page design.

| improve this answer | |

I work in a photo-sharing startup and we have encountered the same problem. We have a dark-grey background also.

By using box-shadows (both inset and outset) in a minimalist way, we have made a design that makes the pictures stand out, even if they are also dark. Here is an example. If your implementation still looks forced, I recommend you try to make it more minimal. Light touches can go a long way.

I hope it helps!

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.